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 combo = new dhx.Combobox("combo_container", {
        css: "custom-class"
    });
</script>

Custom filter for options

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 all the words that contain entered letters independent of their order in a word in the popup list.