Customization

Styling

Related sample: Combobox. Styling (custom CSS)

You can change the appearance of a Combobox. Follow these steps:

• Add one or more CSS classes with the settings you need. Place them in the <style> section of your HTML page or in a separate stylesheet, and include that file on the page.

<style>
    .my_first_class {
        /*some styles*/
    }
    
    .my_second_class {
        /*some styles*/
    }
</style>

• Specify the name of the class you created (or several names 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

Use the filter option to set a custom filtering function for Combobox options. The function takes two parameters:

item	(object) an item of data collection
target	(string) the string to compare to

The function must return true or false to specify whether Combobox displays the item 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, the custom filtering function compares the value you type with items of the data collection letter by letter. The popup list then shows every word that contains the typed letters, regardless of their order.