Skip to main content

Initialization

info

Download the DHTMLX Combo package as a part of the DHTMLX Suite library

To add DHTMLX Combo in your application, you need to follow the steps below:

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX ComboBox</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>            
            const combo = new dhx.Combobox("combo_container", {
                // configuration properties
            });
        </script>
    </body>
</html>

Include source files​

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the DHTMLX Suite library into the header of the file. The files are:

  • suite.js
  • suite.css
index.html
<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 DHTMLX ComboBox, 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.
index.js
const combo = new dhx.Combobox("combo_container", {
    label: "Countries:", 
    placeholder: "Сlick to select",
    // more config options
});

Configuration properties​

See the detailed description of Combo configuration options in the Combobox API overview article.

Load data into ComboBox​

Detailed information on how to load data into ComboBox is given in the Data loading article.

Example​