自动完成 UI，突出显示标签中的多个单词答案

【问题标题】：Autocomplete UI, highlight multiple words in tags自动完成 UI，突出显示标签中的多个单词
【发布时间】：2015-11-24 08:00:30
【问题描述】：

在源代码中没有标签的情况下突出显示多个单词可以正常工作，但我正在寻找一种使用标签的方法。

例如，如果搜索是“jo ramo”，则结果应该是“Joey Ramones”。

$(function() {
    $("#autocomplete").autocomplete({
        source: [
            { "label": "<span class=\"item1\">Joey</span> <span class=\"item2\">Ramones</span>"},
            { "label": "<span class=\"item1\">Johnny</span> <span class=\"item2\">Ramones</span>"},
            { "label": "<span class=\"item1\">Dee Dee</span> <span class=\"item2\">Ramones</span>"}            
        ],
        minLength: 2
    })
    .data("ui-autocomplete")._renderItem = function(ul, item) {
        var searchMask = this.element.val();
        var regEx = new RegExp(searchMask, "ig");
        var replaceMask = "<b>$&</b>";
        var html = item.label.replace(regEx, replaceMask);
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($('<div class="item"></div>').html(html))
            .appendTo(ul);
    }
});

Here is a Fiddle

感谢您的帮助。

【问题讨论】：

标签： jquery-ui autocomplete

【解决方案1】：

根据previous post，我们可以覆盖自动完成过滤器方法来创建我们的自定义过滤器。

$.ui.autocomplete.filter = function (array, term) {
    term=term.trim().replace(/\s+/g, '[^]*');// to search multiple words    
    var matcher = new RegExp("(" + term + ")", "i");
    return $.grep(array, function (value) {
        return matcher.test(value.label || value.value || value);
    });
};

为了将“jo ramo”模式与“Joey Ramones”匹配，我在正则表达式中使用了[^]*

匹配的元素被推送到_renderItem函数，根据需要修改函数（突出多个单词）

function(ul, item) {
    var searchMask = this.element.val().trim();
    var regEx = new RegExp(searchMask, "ig");
    var replaceMask = "<b>$&</b>";
    var html=$(item.label).text(); // manipulating text only
    var splitText = searchMask.split(' ');

    $.each( splitText, function( index, value ){
        html = html.replace(new RegExp(value, "ig"), replaceMask);
    });        

    return $("<li></li>")
        .data("item.autocomplete", item)
        .append($('<div class="item"></div>').html(html))
        .appendTo(ul);
}

示例：http://codepen.io/anon/pen/zrqQzw

【讨论】：