如何突出显示自动完成jquery ui中的输入单词

你能否帮我突出显示自动完成文本框中输入的单词。 我已经填充了自动填充单词，我只需要突出显示单独输入的单词。我是Jquery自动完成的新手

我得到的输出文本像Brijesh //被视为文本
而不是仅仅强调Br 。

以下是片段

 $(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, "$1"), 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 

请帮我。

Answer 1

在我看来，你应该覆盖_renderItem方法来自定义项目的渲染。 代码可以是以下内容：

 $("#studentName").autocomplete({/* all your parameters*/}) .data("autocomplete")._renderItem = function (ul, item) { var newText = String(item.value).replace( new RegExp(this.term, "gi"), "$&"); return $("
") .data("item.autocomplete", item) .append("
" + newText + "
") .appendTo(ul); }; 

在代码中我使用jQuery UI CSS“ui-state-highlight”进行突出显示。 您可以改用 。 此外，我不包含可以逃避任何可能在this.term内部的RegEx字符的this.term 。 我只想解释一下这个主要想法。 有关其他信息，请查看答案 。

更新 ：更新版本的jQuery UI使用.data("ui-autocomplete")而不是.data("autocomplete") 。 要使您的代码在（旧的和新的）jQuery版本中工作，您可以执行以下操作：

 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"), "$&"); return $("
") .data("item.autocomplete", item) .append("
" + newText + "
") .appendTo(ul); }; } 

更新2 ：以同样的方式，名称"item.autocomplete"应更改为"ui-autocomplete-item" 。 看到这里 。

Answer 2

对于jQuery UI中的正确渲染 – v1.12.1使用“div”，而不是“a”

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

Answer 3

我们也可以像这样实现它。

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

Answer 4

如果您正在使用新的JQueryUI，您应该替换它：

 .data("autocomplete")._renderItem 

对此：

 .data("uiAutocomplete")._renderItem 

Answer 5

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

用这个