Question

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

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

作为额外的，如果匹配变为粗体＆gt;那将是很好的。 “三星 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现在是一个简短的列表！ Normaly约有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中条件的值。

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?

jQuery自动完成UI搜索所有方向

1 个答案: