Initialization

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

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.

Back to top