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

Question

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

请帮我.

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"),
                "<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.我只想解释一下这个主要想法.有关其他信息,请查看答案.

更新:更新版本的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".看到这里.

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