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

Highlight Matched Values in AutoComplete


Product Progress® Kendo UI® AutoComplete for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I highlight the matched values from the AutoComplete suggestions based on the value entered by the user?


The following example demonstrates how to achieve the desired scenario.

    <div id="example">
      <div id="shipping">
        <label for="countries" class="info">Choose shipping countries:</label>
        <input id="countries" />
        <div class="hint">Start typing the name of a European country</div>
        $(document).ready(function () {
          var data = [
            "Bosnia & Herzegovina",
            "Czech Republic",
            "San Marino",
            "United Kingdom",
            "Vatican City"

          // Create the UI of the AutoComplete.
            dataSource: data,
            filter: "startswith",
            placeholder: "Select country...",
            separator: ", ",
            template: $.proxy(kendo.template("#= formatValue(data, this.val()) #"), $("#countries"))

        function formatValue(itemText, text) {
          var textMatcher = new RegExp(text, "ig");

          return itemText.replace(textMatcher, function(match) {
            return "<strong>" + match + "</strong>";
      <style scoped>
        .info {
          display: block;
          line-height: 22px;
          padding: 0 5px 5px 0;
          color: #36558e;

        #shipping {
          width: 482px;
          height: 152px;
          padding: 110px 0 0 30px;
          background: url('../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
          margin: 100px auto;

          width: 250px;
          vertical-align: middle;

        .hint {
          line-height: 22px;
          color: #aaa;
          font-style: italic;
          font-size: .9em;
          color: #7496d4;

See Also

In this article