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

Highlight Matched Text from ComboBox Items


Product Progress Kendo UI ComboBox


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


Implement the dataBound event handler for the widget.

  .highlight {
    background-color: yellow;

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

  function onDataBound(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);
      var endIndex = startIndex + inputText.length;

      var outputHtml = [
        itemHtml.slice(0, startIndex),
        '<span class="highlight">',
        itemHtml.slice(startIndex, endIndex),


  $(document).ready(function() {
      placeholder: "Select product",
      dataTextField: "ProductName",
      dataValueField: "ProductID",
      filter: "contains",
      autoBind: false,
      dataBound: onDataBound,
      dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
          read: {
            url: "",

See Also

In this article
Not finding the help you need? Improve this article