jQuery Autocomplete UI 搜索所有方向

Question

我正在使用 jQuery Autocomplete 来显示来自大约 2000 条记录的列表的结果。因为我认为这个列表很长，所以我需要一个好的过滤器来搜索所有这些记录。

我已经修改了源，这样我不仅可以在标签字段中进行搜索，还可以在值字段中进行搜索。我现在想要的是我可以搜索“S4 Galaxy”，它会找到“Samsung Galaxy S4”。标准的jquery自动完成只能从左到右搜索，所以会找到“galaxy s4”，但不会找到“s4 galaxy”。我也想看“gal s4”，找到“Samsung Galaxy S4”。

另外，如果匹配加粗就更好了 > "Samsung Galaxy S4"

我现在使用的完整代码如下：

var completeResults = [{
    value: "S4 iv",
    label: "Samsung Galaxy S4",
    image: "samsung_galaxy_s_iv_1.jpg"
}, {
    value: "stackoverflow",
    label: "Nokia lumia 920",
    image: "nokia_lumia_920_1.jpg"
}];

completeResults 现在是一个简短的列表！通常大约 2000 条记录。

function custom_source(request, response) {
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(completeResults, function (value) {
        return matcher.test(value.value) || matcher.test(value.label);
    }));
}

$("#s").autocomplete({
    source: custom_source,
    minLength: 0
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var inner_html = "<a><img src='../img/type/120x200/" + item.image + "' width='21' height='35'/><span class='title'>" + item.label + "</span></a>";

    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(inner_html)
        .appendTo(ul);
};

Answer 1

好的，这应该是可行的（减去文本的粗体，我会谈到）。基本上策略是：

1. 从用户键入的每个术语中创建一个正则表达式。我们可以通过拆分' ' 上的输入来做到这一点。
2. 对于可能选项列表中的每个选项，查看该选项是否与我们在步骤 1 中提取的每个正则表达式匹配。
3. 仅返回符合第 2 步中条件的值。

function custom_source(request, response) { 
    // Create an array of regular expressions from the user's input:
    var terms = $.map(request.term.split(' '), function (term) {
        // Ignore just whitespace:
        if ($.trim(term)) {
            return new RegExp($.ui.autocomplete.escapeRegex(term), 'i');
        }
    });

    response($.grep(completeResults, function (value) {
        var found = true
            , i
            , regex;

        // For every result, iterate over every term we extracted earlier and make sure it matches:
        for (i = 0; i < terms.length && found; i++) {
            regex = terms[i];
            found = found && (regex.test(value.value) || regex.test(value.label));
        }

        return found;
    }));
}

示例： http://jsfiddle.net/Aa5nK/73/

您问题的另一部分在以下问题中得到回答：

jQueryUI: how can I custom-format the Autocomplete plug-in results?