针对大量选项的Jquery Multi-Select

Question

考虑用户必须从数千个值的列表中选择多个值的情况。我最接近可用的工具是http://quasipartikel.at/multiselect/

主要问题是由于用户必须从中进行选择的大量数据。我目前使用的方法是，用户必须在文本框中输入第一个字符，然后将显示从第一个字符开始的所有值，以便进行多项选择(从而过滤到一个相当大的值列表)。

问题是，即使这样，值的数量也是如此之大，以至于重新加载多选选项需要5-15秒。但是一旦加载了这些值，javascript过滤就会处理剩下的事情，因为用户会输入后续的字符。

对解决这种情况有什么建议吗？

Answer 1

不使用预先填充的多选框，而是使用jQueryUI Autocomplete来过滤列表服务器端，并且只向客户端返回匹配项(类似于StackOverflow上标签选择的工作方式)。

这里有一个很好的选择多个值的示例http://jqueryui.com/autocomplete/#multiple-remote

然后，您可以使用与处理多选相同的方式保存选择结果。

要实现一种混合方法，即第一个字母从服务器获取术语，然后从这些结果中过滤，您可以使用以下内容(请注意，这是完全未经测试的)：

添加一个全局变量来保存结果

var results_cache = [];

在autocomplete中使用混合源

source: function( request, response ) {
    // get the first letter of your search term
    var letter = request.term.substring(0,1);
    // check to see if we already have results for this letter
    if (!results_cache[letter]){
        // no results, fetch via AJAX
        $.getJSON( "search.php", { term: request.term }, 
            function(data){ 
                // cache results
                results_cache[letter] = data;
                // filter results (in case we have more than just 1 character in the term)
                response($.ui.autocomplete.filter(data, request.term));
            }
        );
    } else {
        // we already have data for this letter, just filter the results from the cache
        response($.ui.autocomplete.filter(results_cache[letter], request.term));
    }
},
search: function() {
    // make sure we have at least 1 character for the term
    if (!this.value) return;
    var term = this.value;
},

Answer 2

以下内容很有帮助：

首先，根据某些输入参数过滤值，然后选择最终的大型输入。其次，在加载jquery select值之前，将限制从一个字符增加到多个字符。这将进一步限制值的数量，但用户必须了解多字符输入的限制

但http://quasipartikel.at/multiselect/仍然觉得是最好的选择。