Question

在源代码中突出显示多个单词但没有标记，但我正在寻找一种方法来处理标记。

例如，如果搜索是＆＃34; jo ramo＆＃34;结果应该是＆＃34; Jo ey Ramo nes＆＃34;。

$(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

感谢您的帮助。

Answer 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);
    });
};

匹配＆＃34; jo ramo＆＃34;模式到＆＃34; Jo ey Ramo nes＆＃34;我在RegExp中使用了[^]*

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

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

自动填充UI，突出显示标签中的多个单词

1 个答案: