How to highlight input words in autocomplete jquery ui
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.
If you are using new JQueryUI, You should replace this:
.data("autocomplete")._renderItem
to this:
.data("uiAutocomplete")._renderItem
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);
};
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);
};