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/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>
Related sample: Combobox. Basic Initialization
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:
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
Add a container for ComboBox and give it an id, for example "combo_container":
index.html
<div id="combo_container"></div>
To initialize dhtmlxComboBox, you should use the dhx.Combobox
constructor. The constructor function takes two parameters:
var combo = new dhx.Combobox("combo_container", {// config options});
Related sample: Combobox. Basic Initialization
css | adds style classes for the component |
data | specifies an array of data objects to set into the combobox |
disabled | makes ComboBox disabled |
filter | sets a custom function for filtering ComboBox options |
helpMessage | adds an icon with a question mark next to the Combo input |
hiddenLabel | adds a hidden label for a ComboBox input that will be used while sending a form to the server |
itemHeight | sets the height of a cell in the list of options |
itemsCount | shows the total number of selected options |
label | adds a label for ComboBox |
labelPosition | defines the position of a label of a combobox: "left"|"top" |
labelWidth | sets the width of a label |
listHeight | sets the height of the list of options |
multiselection | enables selection of multiple options in ComboBox |
placeholder | sets a placeholder in the input of ComboBox |
readOnly | makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input) |
selectAllButton | defines whether the Select All button should be shown |
template | sets a template of displaying options in the popup list |
value | specifies the values that will appear in the input on initialization of the combobox |
virtual | enables dynamic loading of data on scrolling the list of options |
See the detailed description of Combo configuration options in the Configuration article.
There are two handy ways of loading data, i.e. a set of options into ComboBox:
var combo = new dhx.Combobox("combo_container");
combo.data.load("../common/dataset.json");
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);
Related sample: Combobox. Basic Initialization
Detailed information on loading data into ComboBox is given in the article Data Loading.
Back to top