Bold Matched Text in MultiSelect Items During Filtering

Updated on Mar 16, 2026

Environment

Product	Progress® Kendo UI® MultiSelect for jQuery
Version	2026.1.212

Description

How can I bold the part of each Kendo UI MultiSelect item that matches the current filter text?

This knowledge base article also answers the following questions:

• How can I highlight the matching text in filtered MultiSelect items?
• How can I use the current filter value inside a MultiSelect itemTemplate?

Solution

Use a custom formatting function and assign an itemTemplate after the MultiSelect is initialized. This approach lets the template use the current filter input value and wrap the matched text in a <strong> element.

<div id="example" role="application">
    <div class="demo-section k-content">
        <h2>Invite Attendees</h2>
        <label for="required">Required</label>
        <select id="required" multiple="multiple" data-placeholder="Select attendees...">
            <option>Steven White</option>
            <option>Nancy King</option>
            <option>Nancy Davolio</option>
            <option>Robert Davolio</option>
            <option>Michael Leverling</option>
            <option>Andrew Callahan</option>
            <option>Michael Suyama</option>
            <option>Anne King</option>
            <option>Laura Peacock</option>
            <option>Robert Fuller</option>
            <option>Janet White</option>
            <option>Nancy Leverling</option>
            <option>Robert Buchanan</option>
            <option>Margaret Buchanan</option>
            <option>Andrew Fuller</option>
            <option>Anne Davolio</option>
            <option>Andrew Suyama</option>
            <option>Nige Buchanan</option>
            <option>Laura Fuller</option>
        </select>
    </div>

    <script>
        function formatValue(dataItem, filterText) {
            var itemText = typeof dataItem === "string" ? dataItem : (dataItem.text || dataItem.value || "");

            if (!filterText) {
                return itemText;
            }

            var escapedText = filterText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
            var textMatcher = new RegExp(escapedText, "ig");

            return itemText.replace(textMatcher, function(match) {
                return "<strong>" + match + "</strong>";
            });
        }

        $(document).ready(function() {
            var multiSelect = $("#required").kendoMultiSelect({
                filter: "contains"
            }).data("kendoMultiSelect");

            multiSelect.setOptions({
                itemTemplate: $.proxy(
                    kendo.template("#= formatValue(data, this.input.val()) #"),
                    multiSelect
                )
            });
        });
    </script>
</div>

See Also

• Kendo UI MultiSelect Overview
• MultiSelect API Documentation