你可以帮助我突出显示自动完成文本框中的打字字.我已经填充了自动完成的单词,我需要只是突出打字的单词one.i是新的
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("<a>" + newText + "</a>")
.appendTo(ul);
};
在代码中,我使用jQuery UI CSS“ui-state-highlight”进行突出显示.您可以使用< strong>代替.此外,我不包括可以避免可能在this.term内的RegEx字符的代码.我只想解释一下你的主要想法.例如,查看the answer以了解更多信息.
UPDATED：更新版本的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)
.append("<a>" + newText + "</a>")
.appendTo(ul);
};
}
更新2：以同样的方式将名称“item.autocomplete”更改为“ui-autocomplete-item”.见here.
