jquery - 根据匹配位置对自动完成 UI 结果进行排序

Question

我想根据字符串中匹配发生的位置对 jQuery 自动完成 UI 结果进行排序。匹配是第一个字母的结果应优先于匹配位于字符串中间的结果。

搜索“M”应返回:

Matt, Michael, Sam, Tim, Adam, Benjamin

相反，由于它现在只是按字母顺序返回项目，所以我得到的是:

Adam, Benjamin, Matt, Michael, Sam, Tim

不幸的是，自动完成 UI 似乎没有任何执行此类操作的选项，而只是按照收到结果的顺序显示结果。让 MySql 进行排序不是一个选择，因为所有可能的匹配项都已预加载，因此我不会在每次击键时都调用数据库。有人做过这样的事吗？

Answer 1

您可以通过为 source 选项提供一个函数而不是一个简单的数组来提供您想要的任何本地过滤逻辑。这是一个简单的示例，可以完成您想要的基本操作:

var source = ['Adam', 'Benjamin', 'Matt', 'Michael', 'Sam', 'Tim'];
$("input").autocomplete({
    source: function (request, response) {
        var term = $.ui.autocomplete.escapeRegex(request.term)
            , startsWithMatcher = new RegExp("^" + term, "i")
            , startsWith = $.grep(source, function(value) {
                return startsWithMatcher.test(value.label || value.value || value);
            })
            , containsMatcher = new RegExp(term, "i")
            , contains = $.grep(source, function (value) {
                return $.inArray(value, startsWith) < 0 &&
                    containsMatcher.test(value.label || value.value || value);
            });

        response(startsWith.concat(contains));
    }
});

示例: http://jsfiddle.net/zkVrs/

基本上，逻辑是构建一个以该术语开头的匹配数​​组，然后将其与包含该术语但不以其开头的匹配连接起来。

性能可能是一个问题，尤其是使用 $.inArray 调用时。可能是完成该部分的更好方法，但希望这会给您一个良好的起点。