Select2 v4.0.0 性能问题

Posted 2023-05-07

【中文标题】Select2 v4.0.0 性能问题

【英文标题】：Select2 v4.0.0 Performance Issue

【发布时间】：2016-01-11 15:23:21

【问题描述】：

在使用 select2 下拉适配器时，我在 IE 中遇到了大量项目的性能问题。看起来这不是 select2 的新问题，人们过去已经解决了它（即这里Select2 performance for large set of items）

但是，通过查看源代码，似乎对上面链接的解决方案的支持在 select2 v4.0.0 中已被弃用。你们中的任何人使用 select2 v4.0.0 是否遇到过大型列表（特别是在 IE 中）的性能问题？如果是这样，您是如何度过难关的。我想在下拉列表中使用某种“分页”来解决问题，如上面的链接所示……但看起来它可能比它的价值更麻烦。接受任何建议。

【参考方案1】：

您可以在使用 select2 时向服务器发送请求，而不是用大量不必要的数据填充它，而且它的性能要好得多。 举个例子：

$('#a_tags').select2(
                        placeholder: '',                            
                        allowClear : true,
                        minimumInputLength : 2,

                        ajax : 
                                    url : base_url + 'c_options/you_example',
                                    dataType : 'json',
                                    delay : 250,
                                    data : function(params)
                                        return 
                                                    term : params.term, // search term
                                                    type : 'tags'
                                        ;
                                    ,
                                    processResults : function(data, page)
                                        dataObj = new Array();
                                        results: $.map(data, function(obj)
                                            c(obj.l_id)
                                            c(obj.l_details)
                                            dataObj.push(
                                                        id : obj.o_id,
                                                        text : obj.o_name_a
                                            );
                                        )
                                        return 
                                            results : dataObj
                                        ;
                                    ,
                                    cache : true
                        
            );

【讨论】：

我应该提到我试图分页的数据是本地的（因为黑暗领主自己强加的原因）。然而，你的评论确实激发了一些想法。我发现 select2 有一个称为 InfiniteScroll 的适配器。当与自定义数据装饰器（或适配器）结合使用时，它工作得非常好。您需要自定义数据装饰器（适配器）的原因是因为您需要覆盖查询方法以返回一个对象，该对象除了回调的“结果”之外还具有“分页”字段。我不确定无限卷轴是否应该像这样使用。

这是一个 JSBin link 显示了一些代码。它本质上是上面我的问题中提到的问题中代码的 select2v4.0.0.0 包装 ***.com/questions/15041058/…