Jquery Multi-Select 对于非常多的选项答案

【问题标题】：Jquery Multi-Select For very large number of optionsJquery Multi-Select 对于非常多的选项
【发布时间】：2012-10-29 15:37:05
【问题描述】：

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

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

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

任何其他方式来解决这种情况的建议？？？？

【问题讨论】：

我认为随您的情况发布一些（HTMl、JavaScript/jQuery）代码将有助于我们进行故障排除。

标签： jquery-ui jquery jquery-autocomplete jquery-select2

【解决方案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;
},

【讨论】：

你确定 jQueryUI 自动完成过滤服务器端吗？是什么让你相信这一点？
@DougieBear 我的意思是使用 AJAX source: 加载您的数据，然后可以在服务器端进行过滤。我过去已经实现了这一点。
好的，我刚刚检查过，还有一个多值选择自动完成选项。很酷，但不是前面提到的多选选项更好，只需一个 ajax 搜索输入的第一个字母，我们可以获取预填充的列表，然后通过单击从结果中添加许多值而不是而不是分别输入它们。会更快。
@kapil 这绝对是一个选择，但你需要自己实现两者的混合，我会在我的回答中举一个例子。
@kapil 更新了一个示例，未经测试，但希望足以推断出意图。

【解决方案2】：

以下内容很有帮助：

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

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

【讨论】：