New to Kendo UI for jQuery? Download free 30-day trial

Highlight Matched Text from ComboBox Items

Environment

Product Progress Kendo UI ComboBox

Description

How the matched text in the ComboBox items could be highlighted?

Solution

Implement the dataBound event handler for the widget.

<style>
  .highlight {
    background-color: yellow;
  }
</style>

<h4>Find a product</h4>
<input id="products" style="width: 100%;" />

<script>
  function onDataBound(e) {
    var combo = e.sender;
    var items = combo.items();
    var inputText = $('.k-input-inner').val().toLowerCase();

    for (var i = 0; i < items.length; i += 1) {
      var item = $(items[i]);
      var itemHtml = item.html();
      var startIndex = itemHtml.toLowerCase().indexOf(inputText);
      if(startIndex>=0){  // Only highlighted the items which contain the search text
        var endIndex = startIndex + inputText.length;
        var outputHtml = [
          itemHtml.slice(0, startIndex),
          '<span class="highlight">',
          itemHtml.slice(startIndex, endIndex),
          '</span>',
          itemHtml.slice(endIndex)
        ].join('');

        item.html(outputHtml);
      }
    }
  }

  // Remove highlight after seleting the event. Otherwise dropdown always highlighted the item which has been selected frist time after searching text.
  function removeHighlight(e) {
    var combo = e.sender;
    var items = combo.items();
    var inputText = $('.k-input').val().toLowerCase();

    for (var i = 0; i < items.length; i += 1) {
      var item = $(items[i]);
      var itemHtml = item.html();
      var startIndex = itemHtml.toLowerCase().indexOf(inputText);
      if (startIndex > 0) {
        if (item.find('span.highlight').length > 0) { 
          var itemText = item.text();
          item.html(itemText);
        }
      }
    }
  }

  $(document).ready(function() {
    $("#products").kendoComboBox({
      placeholder: "Select product",
      dataTextField: "ProductName",
      dataValueField: "ProductID",
      filter: "contains",
      autoBind: false,
      dataBound: onDataBound,
      dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
          read: {
            url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
          }
        }
      },
      select: function (e) {
        var item = e.dataItem;
    // This checking is required. issue in kendo dropdown : the select event is triggered on blur, although it is not needed
        if (item !== null) {
          removeHighlight(e);
        }
      }
    });
  });
</script>

See Also

In this article