您能帮我突出显示自动完成文本框中键入的单词吗?我已经填充了自动完成单词,我只需要突出显示键入的单词。我是 Jquery 自动完成的新手
我得到的输出为类似 <Strong>Br</Strong>ijesh
的文本//视为文本
而不是单独突出显示 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, "<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
请帮助我。
最佳答案
在我看来你应该覆盖 _renderItem
方法来自定义项目的呈现。代码可能如下:
$("#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);
};
在代码中,我使用 jQuery UI CSS“ui-state-highlight”来突出显示。您可以使用<strong>
反而。此外,我不包含会转义任何 RegEx
的代码。可能位于 this.term
内的字符。我只想向您解释主要思想。看the answer例如,了解更多信息。
更新:最新版本的 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"),
"<span class='ui-state-highlight'>$&</span>");
return $("<li></li>")
.data("item.autocomplete", item)
.append("<div>" + newText + "</div>")
.appendTo(ul);
};
}
更新2:以同样的方式命名"item.autocomplete"
应更改为"ui-autocomplete-item"
。请参阅here .
关于jquery-ui - 如何在自动完成jquery ui中突出显示输入单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9887032/