Question

我想在自动填充中以字符串粗体制作匹配的文字我从link获得了很大的帮助。

对于单个单词或单词而言，这不是顺序我想使单词变为粗体，无论它们的顺序如何。

我想在字符串粗体

中创建匹配的每个单词

var t = "Cadbury Gems 100gm Tasty";
var wordArr = 'gems tasty'.toLowerCase().replace(/\b[a-z]/g, function (letter) {
    return letter.toUpperCase();
}).split(' ');
$.each(wordArr, function (i) {
    console.log(wordArr[i]);
    var re = new RegExp("^" + wordArr[i], "i");
    t = t.replace(re, "<span style='font-weight:bold;color:Blue;'>" + wordArr[i] + "</span>");

})
console.log(t);
var li = $("<li></li>")
//.data("item.autocomplete", item)
.append("<a style='text-align:left'>" + t + "</a>")
    .appendTo($('#ul'));

我的Fiddle

我试过$.each但是没有用。任何想法。

Answer 1

使用jQuery UI小部件工厂尝试这个构建：

$.widget("custom.autocompleteHighlight", $.ui.autocomplete, {
            _renderItem: function (ul, item) {
                var regexp = new RegExp('(' + this.term + ')', 'gi'),
                    classString = this.options.highlightClass ?  ' class="' + this.options.highlightClass + '"' : '',
                    label = item.label.replace(regexp, '<span' + classString + '>$1</span>');

                return $('<li><a href="#">' + label + '</a></li>').appendTo(ul);
            }
    }
});

您现在可以将它用于：

$('input.jsAutocompleteHighlight').autocompleteHighlight({
        highlightClass: 'ui-autocomplete-hightlight'
});

CSS样式：

.ui-autocomplete-highlight {
    font-weight: bold;
}

Answer 2

使用此：

mynew = item.label
$.each(this.term.split(' '),function(k,v){
    var re = new RegExp(v,'i')
    mynew = mynew.replace(re,'<span style="color:red">' + v + '</span>');
})

Jquery自动完成突出显示文本

2 个答案: