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/combobox.css">
        <script type="text/javascript" src="/codebase/combobox.js"></script>
   </head>
   <body>
        <div id="combo_container"></div>
        <script>            var combo = new dhx.Combobox("combo_container", {// configuration});
        </script>
    </body>
</html>

Include source files

To create dhtmlxComboBox, you need to include 2 source files on your page:

combobox.js
combobox.css

Make sure that you set correct relative paths to these files:

myComboBox.html

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

Create a container

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

myComboBox.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

cellHeight - (number) sets the height of a cell in the list of options
listHeight - (number) sets the height of the list of options
label - (string) adds a label for ComboBox
labelInline - (boolean) defines whether a label will be placed in one line with ComboBox
labelWidth - (string) sets the width of a label
readonly - (boolean) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
disabled - (boolean) makes ComboBox disabled
template - (function) sets a template of displaying options in the popup list
customFilter - (function) sets a custom function for filtering ComboBox options. Check the details
multiselection - (boolean) enables selection of multiple options in ComboBox
placeholder - (string) sets a placeholder in the input of ComboBox
selectAllButton - (boolean) defines whether the Select All button should be shown
showItemsCount - (boolean|function) shows the total number of selected options
virtual - (boolean) enables dynamic loading of data on scrolling the list of options
required - (boolean) defines whether the field with ComboBox is required (for a form)
hiddenLabel - (boolean) adds a hidden label for a ComboBox input that will be used while sending a form to the server
css - (string) adds style classes for the component

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.