在javascript / jquery中自动完成时突出显示匹配的字母

Question

我有一组机场名称及其代码，以便在自动填充中显示。

E.g。 Amsterdem（AMS）

我想匹配搜索框中输入的值，我想显示匹配的机场名称以及机场代码粗体，如下所示。

如果我在搜索框中输入 ams ，我想突出显示＆＃39; Ams ＆＃39; terdem（＆＃39; AMS ＆＃39;）在我的自动填充功能中。

我编写了如下代码：

function () {
    var oldFn = $.ui.autocomplete.prototype._renderItem;
    $.ui.autocomplete.prototype._renderItem = function( ul, item) {
        var re = new RegExp("^" + this.term, "i") ;
        var t = item.label.replace(re,"<span style='font-weight:bold;'>" + this.term + "</span>");
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + t + "</a>" )
            .appendTo( ul );
    };
};

结果为＆＃39; Ams ＆＃ter;（AMS）而不是＆＃39; Ams ＆＃39; terdem（ AMS ）。

注意：Amsterdem（AMS）是一个单词

请建议。

Answer 1

你必须改变

var re = new RegExp("^" + this.term, "i") ;

使用此代码

var re = new RegExp(this.term, "ig") ;

这将替换字符串中的所有实例

“^”表示字符串的开头，正则表达式中的“g”适用于所有实例

here正在运作

用这个替换你的代码

function () {
var oldFn = $.ui.autocomplete.prototype._renderItem;
$.ui.autocomplete.prototype._renderItem = function( ul, item) {
    var re = new RegExp(this.term, "ig") ;
    var t = item.label.replace(re,"<span style='font-weight:bold;'>" + this.term + "</span>");
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + t + "</a>" )
        .appendTo( ul );
};
};