# Initialization

dhtmlXCombo can be initialized in a plenty of ways. The most simple is initialization from existing selectbox control. All what need to be done

1. include necessary files

    		<script src="../js/dhtmlXCommon.js"></script>
    		<script src="../js/dhtmlXCombo.js"></script>
    		<link rel="STYLESHEET" type="text/css" href="../css/dhtmlXCombo.css">

2. set path to image folder ( or just copy image files to your app folder)

    		<script>
    			window.dhx_globalImgPath="../imgs/";
    		</script>

3. write native select box code

    		<select style='width:200px;'  id="combo_zone1" name="alfa1">
    				<option value="1">a00</option>
    				<option value="2">a01</option>
    		</select>

4. create dhtmlXCombo from select control

    		<script>
    			var z=dhtmlXComboFromSelect("combo_zone1");
    		</script>

- combo_zone1 - id of select which need to be converted

Related sample
The second approach is to create a new combobox inside some html container.

1. include necessary files

    		<script src="dhtmlxcommon.js"></script>
    		<script src="dhtmlxcombo.js"></script>
    		<link rel="STYLESHEET" type="text/css" href="dhtmlXCombo.css">

2. write any container code (DIV is most common)

    		<div id="combo_zone2" style="width:200px; height:30px;"></div>

3. create dhtmlXCombo in HTML container

    		<script>
    			var z=new dhtmlXCombo("combo_zone2","alfa2",200);
    		</script>

- combo_zone2 - id of HTML container
- alfa2 - named used in form integration
- 200 - width of combobox
- use 4th parameter in constructor if you need to include images in Combo ("image")

Related sample

# Adding options

Option can be added in next ways

1. By addOption command

    				var z=new dhtmlXCombo("combo_zone3","alfa3",200);
    				z.addOption(value,label,css);

- value - value of option
- label - label of option
- css - css string attached to option, optional

It is possible to add few options at once

    				var z=new dhtmlXCombo("combo_zone3","alfa3",200);
    				z.addOption([[value,label,css],[value2,label2,css3],[value3,label3,css3]]);

2. From XML file

    				var z=new dhtmlXCombo("combo_zone3","alfa3",200);
    				z.loadXML("xml/data.xml");

Where XML is have next format

    				<?xml version="1.0" ?>
    				<complete>
    					<option value="1">one</option>
    					<option value="2">two</option>
    					<option value="3">three</option>
    					<option value="4">four</option>
    					<option value="5">five</option>
    					<option value="6">six</option>
    					<option value="7">seven</option>
    					<option value="8">eight</option>
    					<option value="9">nine</option>
    					<option value="10">ten</option>
    				</complete>

Possible attributes of <option> tag:

- value - option value
- selected - if option selected
- img_src - icon url (also add 4th parameter to combobox constructor - "image")

Sample of XML file || XML definition file
3. From autocomplete xml file
Plese check "filtration" section for more details
4. From HTML in case of converting from existing select box

Related sample

# Integrating with FORM tag

dhtmlXCombo automatically integrates in surrounding FORM tag. While submitting such form, there are two form wields will be sent to server side

- COMBONAME - value of combobox
- COMBONAME_new_value - true if value is text entered in combobox, false if value one of items from predefined list. of combobox
If grid will be initialized by next command

    			var z=new dhtmlXCombo("combo_zone3","alfa3",200);

server side script will receive fields with names "alfa3" and "alfa3_new_value"

Related sample (PHP required for showing server side results)

# Filtering

dhtmlXCombo can work in filtering mode. In such mode the values in list filtered by current entered text in edit control.

To enable filtration next command can be called

    			z.enableFilteringMode(true);

By default combobox uses options which already loaded in it, but it is possible to define the external script which will be called for generating list of suggestion.

    			z.enableFilteringMode(true,"php/complete.php",cache);

- php/complete.php - path to script
- cache - true/false - enable/disable caching of script responses ( using "true" recommended )

In described situation, for each change of text in edit control the next url will be called
php/complete.php?pos=0&mask=TEXT

- TEXT - current text in edit control

The combobox awaits that script response will be a XML in same format which used for initialization.
If you prefer - you can return only part of suggestion, combobox can automatically send additional request and add more data to list of options.

    			z.enableFilteringMode(true,"php/complete.php",cache,true);

The server side script will be called by url
php/complete.php?pos=START&mask=TEXT

- START - position from which suggestion must be returned.

For all additional sub fetches returned XML must have "add" attribute of main tag

    			<?xml version="1.0" ?>
    			<complete add="true">
    				...

Related sample (PHP required for dynamic autocomplete)

# Operations with combobox

Main operations include

1. Show/Hide combo by combo.show(mode);
2. Enable/Disable readonly mode by combo.readonly(mode);
3. Enable/Disable disabled mode by combo.disable(mode);

Related sample

# Operations with comobobox's options

1. Add option - combo.addOption(...);
2. Delete option - combo.deleteOption(value);
3. Update option - combo.updateOption(oldvalue,value,text,css);
4. Get selected value option - combo.getSelectedValue();
5. Get selected text - combo.getSelectedText();
6. Get text in combo edit - combo.getComboText();
7. Set text in combo edit - combo.setComboText();

Related sample