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 words alone.i am new to Jquery autocomplete

i am getting the output as text like <Strong>Br</Strong>ijesh // seen as text
and not as highlighting the Br alone.

Below is the snippet

$(document).ready(function () { $("#studentName").autocomplete({     source: function (request, response) {         $.ajax({             type: "POST",             contentType: "application/json; charset=utf-8",             url: "Webservice.asmx/GetStudentNames",             data: "{'prefixText':'" + request.term + "'}",             dataType: "json",              success: function (data) {            var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");                 response($.map(data.d, function (item) {                     return {                     label: item.split('|')[0].replace(regex, "<Strong>$1</Strong>"),                     val: item.split('|')[1]                     }                 }))             },              failure: function (response) {                 ServiceFailed(result);             }         });     },     select: function (event, ui) {      txtStudent(ui.item.val, ui.item.label); //Student name and id used in this method     },     minLength: 2 }); });              // End of ready method 

Please help me.

Answer 1

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.