Autocomplete in Combo

dhtmlxCombo provides the autocomplete feature, i.e. it can work in the filtering mode.

In this mode values in the list are filtered by the current text entered in the edit control. To enable filtration, the next command should be called:

myCombo.enableFilteringMode(true);

Generating List of Suggestions

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

myCombo.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 the described situation, once text in edit control is changed, the next URL will be called:

"php/complete.php?pos=0&mask=TEXT"

TEXT - current text in edit control

Response Details

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

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

The server-side script will be called by the URL below:

"php/complete.php?pos=START&mask=TEXT"

START - position from which a suggestion must be returned.

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

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

Custom filtering

To provide custom filtering rules in Combo, use the onDynXLS event. The event fires when Combo gets data from the server and allows you to specify a function for processing this data.

myCombo.enableFilteringMode(true,"dummy"); 
myCombo.attachEvent("onDynXLS", myComboFilter);
 
function myComboFilter(text){ // where 'text' is the text typed by the user into Combo
    myCombo.clearAll();
    dhtmlxAjax.get("data.php?mask="+text, function(xml){
        myCombo.load(xml.xmlDoc.responseText);
    })
};

User-defined function

You can define a custom filtering function. For this purpose, use the code as in:

myCombo.filter(function(text){
    if (text.indexOf("a") === 0) return true;
    return false;
})

To keep option in the list, you need to return true.