jQuery-ui自动完成多个值按字母顺序对结果进行排序 [英] jQuery-ui autocomplete multiple values sort results alphabetically

问题描述

参考此问题根据匹配位置对自动填充UI结果进行排序，有一种解决方案可提供单值jQuery自动完成功能，但有可能为多值jQuery自动完成功能提供类似的解决方案( http://jqueryui.com/autocomplete/#multiple )?

With reference to this question Sorting Autocomplete UI Results based on match location, there is a solution that provides for single value jQuery autocomplete but is it possible to get a similar solution for multiple values jQuery autocomplete (http://jqueryui.com/autocomplete/#multiple)?

推荐答案

此处唯一的区别是您需要像链接的演示一样在进行操作并确保调用extractLast.这是应该与多个值一起使用的完整代码(请特别注意source选项):

The only difference here is that you need to make sure and call extractLast like the demo you linked to is doing. Here's the complete code that should work with multiple values (pay particular attention to the source option):

$("#tags")
    .on("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = $.ui.autocomplete.escapeRegex(extractLast(request.term))
                // Create two regular expressions, one to find suggestions starting with the user's input:
                , startsWithMatcher = new RegExp("^" + term, "i")
                , startsWith = $.grep(source, function(value) {
                    return startsWithMatcher.test(value.label || value.value || value);
                })
                // ... And another to find suggestions that just contain the user's input:
                , containsMatcher = new RegExp(term, "i")
                , contains = $.grep(source, function (value) {
                    return $.inArray(value, startsWith) < 0 &&
                        containsMatcher.test(value.label || value.value || value);
                });            

            // Supply the widget with an array containing the suggestions that start with the user's input,
            // followed by those that just contain the user's input.
            response(startsWith.concat(contains));
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
});

示例: http://jsfiddle.net/Aa5nK/1/

这篇关于jQuery-ui自动完成多个值按字母顺序对结果进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！