jQuery-ui 自动完成多个值按字母顺序排序结果

jQuery-ui autocomplete multiple values sort results alphabetically

参考这个问题 Sorting Autocomplete UI Results based on match location ,有一个提供单值 jQuery 自动完成的解决方案,但是否有可能为多值 jQuery 自动完成获得类似的解决方案(http://jqueryui.com /自动完成/#multiple)?


这里唯一的区别是你需要确保和调用 extractLast 就像你链接到的演示正在做的那样。这是应该使用多个值的完整代码(特别注意 source 选项):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$("#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/


在响应中,您应该返回与您的查询匹配的结果列表:

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
list_of_terms = {"term0","term1","term2",…};

$("#inputsearch").autocomplete({
    var term = request.term
    var list = new Array();
    source: function( request, response ) {
        var cnt = 0;
        $.each(list_of_terms, function(i) {
            var rSearchTerm = new RegExp(‘^’ + RegExp.quote(term),’i’);
            if (list_of_terms[i].match(rSearchTerm)) {                
                list[cnt] = list_of_terms[i];
                cnt++;
            }
       });
     response(list);
    }
});

RegExp.quote = function(str) {
    return (str+”).replace(/([.?*+^$[//]////(){}|-])/g,"////$1");
};

如果我没有遗漏括号,如果输入的术语等于 list_of_terms 数组中术语的开头,这应该会在下拉列表中为您提供多个值


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268806.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论