It is possible to set a custom filtering function for the options of ComboBox via the filter option. A custom function takes two parameters:
item | (object) an item of data collection |
target | (string) the string to compare to |
and should return true/false to specify whether an item should be displayed in the filtered list of options.
function fuzzySearch(item, target) {
var source = item.value.toLowerCase();
target = target.toLowerCase();
var sourceLen = source.length;
var targetLen = target.length;
if (targetLen > sourceLen) {
return false;
}
var sourceIndex = 0;
var targetIndex = 0;
while (sourceIndex < sourceLen && targetIndex < targetLen) {
if (source[sourceIndex] === target[targetIndex]) {
targetIndex++;
}
sourceIndex++;
}
return targetIndex === targetLen;
}
var combo = new dhx.Combobox("combo_container", {
filter: fuzzySearch
});
Related sample: Combobox. Custom Filter
In the above example a custom filtering function compares an entered value with items of data collection letter by letter, and shows in the popup list all the words that contain entered letters independent of their order in a word.
There is a possibility to make changes in the look and feel of a combo box. For this you need to take the following steps:
<style>
.my_first_class {
/*some styles*/
}
.my_second_class {
/*some styles*/
}
</style>
var combo = new dhx.Combobox({
css:"my_first_class my_second_class"
});
Related sample: Combobox. Custom CSS
Back to top