Initialization

This article gives you detailed instructions on how to create dhtmlxCombo on a page. Follow the steps below:

Download the dhtmlxComboBox package and unpack it into a folder of your project
Include source files
Create a container
Initialize ComboBox with the object constructor
Load data into ComboBox

myCombobox.html

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxComboBox</title>
        <link rel="stylesheet" type="text/css" href="/codebase/suite.css">
        <script type="text/javascript" src="/codebase/suite.js"></script>
   </head>
   <body>
        <div id="combo_container"></div>
        <script>            var combo = new dhx.Combobox("combo_container", {// configuration});
        </script>
    </body>
</html>

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

suite.js
suite.css

<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for ComboBox and give it an id, for example "combo_container":

index.html

<div id="combo_container"></div>

Initialize ComboBox

To initialize dhtmlxComboBox, you should use the dhx.Combobox constructor. The constructor function takes two parameters:

a container to place a Combo Box into. The one we have created at the previous step.
an object with configuration properties. See the full list below.

var combo = new dhx.Combobox("combo_container", {// config options});

Configuration properties

css - (string) adds style classes for the component
data - (array) specifies an array of data objects to set into the combobox
Related sample: Config data - DHTMLX Combobox
disabled - (boolean) makes ComboBox disabled
filter - (function) sets a custom function for filtering ComboBox options. Check the details
helpMessage - (string) adds an icon with a question mark next to the Combo input
hiddenLabel - (boolean) adds a hidden label for a ComboBox input that will be used while sending a form to the server
itemHeight - (number|string) sets the height of a cell in the list of options
itemsCount - (boolean|function) shows the total number of selected options
label - (string) adds a label for ComboBox
labelPosition - (string) defines the position of a label of a combobox: "left"|"top"
labelWidth - (string|number) sets the width of a label
listHeight - (number|string) sets the height of the list of options
multiselection - (boolean) enables selection of multiple options in ComboBox
placeholder - (string) sets a placeholder in the input of ComboBox
readonly - (boolean) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
selectAllButton - (boolean) defines whether the Select All button should be shown
template - (function) sets a template of displaying options in the popup list
virtual - (boolean) enables dynamic loading of data on scrolling the list of options

See the detailed description of Combo configuration options in the Configuration article.

Load data into ComboBox

There are two handy ways of loading data, i.e. a set of options into ComboBox:

from an external file with the help of the load method of Data collection:

var combo = new dhx.Combobox("combo_container");
combo.data.load("../common/dataset.json");

from a local source using the parse method of Data collection:

var countries = [
    {
        value: "Austria",
        src: "../common/flags/at.png"
    },
    {
        value: "Belgium",
        src: "../common/flags/be.png"
    },
    {
        value: "Bulgaria",
        src: "../common/flags/bg.png"
    },
    {
        value: "Cyprus",
        src: "../common/flags/cy.png"
    }
]
 
var combo = new dhx.Combobox("combo_container");
combo.data.parse(countries);

Detailed information on loading data into ComboBox is given in the article Data Loading.