How to highlight input words in autocomplete jquery ui

Question

Could you please help me in highlighting the typed words in the auto complete text box. i am already populating the autocomplete words and i need to just highlight the typed

Answer 1

Here is the code I used to make it work (case insensitive):

open: function (e, ui) {
      var acData = $(this).data('ui-autocomplete');
      acData.menu.element.find('li').each(function () {
         var me = $(this);
         var keywords = acData.term.split(' ').join('|');
         me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<strong>$1</strong>'));
      });
   }

Answer 2

we can also implement it like this.

 $("#studentName").autocomplete({/* all your parameters*/});
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {        
        var t = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + t + "</a>")
            .appendTo(ul);
    };

Answer 3

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
};

Use this

Answer 4

For a correct render in jQuery UI - v1.12.1 use "div", not "a"

$.ui.autocomplete.prototype._renderItem = function (ul, item) {        
    var t = String(item.value).replace(
            new RegExp(this.term, "gi"),
            "<strong>$&</strong>");
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<div>" + t + "</div>")
        .appendTo(ul);
};

Answer 5

If you are using new JQueryUI, You should replace this:

.data("autocomplete")._renderItem

to this:

.data("uiAutocomplete")._renderItem

Answer 6

It seems to me you should overwrite the _renderItem method to have custom rendering of the items. The code could be about the following:

$("#studentName").autocomplete({/* all your parameters*/})
    .data("autocomplete")._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };

In the code I use jQuery UI CSS "ui-state-highlight" for highlighting. You can use <strong> instead. Moreover I don't include the code which would escape any RegEx characters which could be inside of this.term. I wanted to explain you the main idea only. Look at the answer for example for additional information.

UPDATED: More recent versions of jQuery UI uses .data("ui-autocomplete") instead of .data("autocomplete"). To make your code working in both (old and new) versions of jQuery you can do something like the following:

var $elem = $("#studentName").autocomplete({/* all your parameters*/}),
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");
if (elemAutocomplete) {
    elemAutocomplete._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };
}

UPDATED 2: In the same way the name "item.autocomplete" should be changed to "ui-autocomplete-item". See here.