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

Question

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

搜索"M"应返回:

马特,迈克尔,萨姆,蒂姆,亚当,本杰明

相反,因为它现在只是按字母顺序返回项目,所以我得到了这个:

亚当,本杰明,马特,迈克尔,萨姆,蒂姆

不幸的是,看起来Autocomplete 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通话时.可能是一个更好的方法来完成这一部分,但希望这将给你一个很好的起点.