Skip to main content

Customization

Styling

Related sample: Combobox. Styling (custom CSS)

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:

  • add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case)
<style>
.my_first_class {
/*some styles*/
}

.my_second_class {
/*some styles*/
}
</style>
  • specify the name of the created CSS class (or names of classes separated by spaces) as the value of the css property in the ComboBox configuration:
const combo = new dhx.Combobox("combo_container", {
css:"my_first_class my_second_class"
});

For example:

<style>
body {
margin: 0;
}
.custom-class .dhx_combobox-input-box {
border-radius: 20px;
background: #FFF;
}
</style>

<script>
const combobox = new dhx.Combobox("combobox_container", {
css: "custom-class"
});
</script>

Custom filter for options

Custom filter

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) {
const source = item.value.toLowerCase();
target = target.toLowerCase();
const sourceLen = source.length;
const targetLen = target.length;
if (targetLen > sourceLen) {
return false;
}
let sourceIndex = 0;
let targetIndex = 0;
while (sourceIndex < sourceLen && targetIndex < targetLen) {
if (source[sourceIndex] === target[targetIndex]) {
targetIndex++;
}
sourceIndex++;
}
return targetIndex === targetLen;
}

const 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.