【问题标题】:jQuery-ui autocomplete multiple values sort results alphabeticallyjQuery-ui 自动完成多个值按字母顺序排序结果
【发布时间】:2013-02-09 03:57:34
【问题描述】:

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

【问题讨论】:

    标签: jquery jquery-ui sorting jquery-ui-autocomplete


    【解决方案1】:

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

    $("#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/

    【讨论】:

    • 谢谢!终于找到了我正在寻找的东西......整洁的解决方案
    【解决方案2】:

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

    例如

    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 数组中术语的开头,这应该会在下拉列表中为您提供多个值

    【讨论】:

    • 这个去哪儿了?看起来这是在代码框中 - RegExp.quote = function(str) { return (str+'').replace(/([.?*+^$[](){}|-])/g, " \$1"); };
    • 这是javascript。它包含在 javascript 的脚本标签中。您通过输入框 id 将其链接到您的输入框
    • 这段代码 - RegExp.quote = function(str) { return (str+'').replace(/([.?*+^$[]\(){}|-])/g, "\$1"); }; 去哪儿了?因为它在答案中的灰色框之外。
    • 这也进入了 javascript。它应该是灰色的。我会解决的
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-28
    • 2015-10-27
    • 1970-01-01
    • 1970-01-01
    • 2012-06-04
    相关资源
    最近更新 更多