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

你可以帮助我突出显示自动完成文本框中的打字字.我已经填充了自动完成的单词,我需要只是突出打字的单词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.