Jquery ui 如何在自动完成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, "<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

$（文档）.ready（函数（）{
$（“#学生姓名”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
url:“Webservice.asmx/GetStudentNames”，
数据：“{'prefixText'：'”+request.term+“}”，
数据类型：“json”，
成功：功能（数据）{
var regex=newregexp（（？！[^&；]+；）（？！）（？！[^&；]+；），“gi”）；
响应（$.map）（数据.d，函数（项）{
返回{
标签：item.split（“|”）[0]。替换（regex，“$1”，
val:item.split（“|”）[1]
}
}))
},
故障：功能（响应）{
服务失败（结果）；
}
});
},
选择：功能（事件、用户界面）{
txtstuden（ui.item.val，ui.item.label）；//此方法中使用的学生名称和id
},
最小长度：2
});
});              // 就绪结束方法

---

请帮帮我。

在我看来，您应该覆盖

\u 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);
    };

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”

。请参阅。

如果您正在使用新的JQueryUI，则应替换此：

.data("autocomplete")._renderItem

为此：

.data("uiAutocomplete")._renderItem

---

我们也可以这样实现它

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

$（“#studentName”）.autocomplete（{/*所有参数*/}）；
$.ui.autocomplete.prototype.\u renderItem=函数（ul，项）{
var t=字符串（item.value）。替换(
新RegExp（本术语“gi”），
"$&");
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+t+”）
.附录（ul）；
};

要在jQuery UI-v1.12.1中获得正确的渲染，请使用“div”，而不是“a”

$.ui.autocomplete.prototype.\u renderItem=函数（ul，项）{
var t=字符串（item.value）。替换(
新RegExp（本术语“gi”），
“$&”；
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+t+”）
.附录（ul）；
};

$.ui.autocomplete.prototype.\u renderItem=功能（ul，项目）{
item.label=item.label.replace（新的RegExp（（？！[^&；]+；）（？！）（？！[^&；]+；），“gi”），“$1”；
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.附录（ul）；
};

---

使用此

以下是我用来使其工作的代码（不区分大小写）：

open：功能（e、ui）{
var acData=$（this）.data（'ui-autocomplete'）；
acData.menu.element.find（'li'）。每个（函数（）{
var me=$（此）；
var关键字=acData.term.split（“”）.join（“|”）；
html（me.text（）.replace（新的RegExp（“（“+关键字+”）”，“$1”）；
});
}

还有一句话。您使用

val

和

label

属性

item

，但是文档（参见“数据模型”部分）描述它应该是

value

（而不是

val

）和

label

@pal:顺便说一句，我知道您仍然没有使用过您的权利。投票是搜索引擎的主要标准。你每天可以投票选出大约30个问题或答案（参见）。因此，通过对stackoverflow上的有用信息进行投票，您可以帮助其他访问者找到这些信息。因此，我建议您开始使用您的投票权。

RegExp（this.term，“gi”）

如果搜索词是任何可以解析为regex的内容，特别是括号或美元符号，则会引起戏剧性的后果。@nness:如果您只需要突出显示文本，则可以使用

.toUpperCase（）.indexOf（）

在字符串

项.value

中定位子字符串

此.term

。您可以使用简单的JavaScript字符串suntions插入

。或者，您可以在调用

RegEx

之前转义所有特殊字符（参见示例）。我的旧答案的主要思想不是提供完美的解决方案，而是表明可以使用

\u renderItem

的自定义实现以自定义方式呈现菜单项。@oleg，绝对理解；我只是想强调没有regexp经验的人复制和粘贴代码时可能出现的问题。上述代码在我的情况下不起作用，我必须使用$.ui.autocomplete.prototype.\u renderItem=function（ul，item）{/*代码的其余部分*/}

$.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);
};

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

open: function (e, ui) {
      var acData = $(this).data('ui-autocomplete');
      acData.menu.element.find('li').each(function () {
         var me = $(this);
         var keywords = acData.term.split(' ').join('|');
         me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<strong>$1</strong>'));
      });
   }