如何在Select2 4.0中同时使用本地json数组和无限滚动？

Question

由于在 DOM 上创建/删除大量 <option> 标记的成本很高，我正在寻找一种在 Select2 4.0 中使用大型本地 JSON 以及无限滚动的方法。我还希望能够正确获取/设置/更新值。有this stackoverflow question（其中我提供了一个泥泞的解决方案）但我的解决方案有2个问题：

1. 我可以清除单个源选择中未选择的选项，并且 Select2 控件不会中断。这可以防止在源选择中建立不需要的选项（因为我使用本地 JSON 数组存储数据）。但是，如果我尝试对多个选择执行相同操作，这将破坏 Select2 中的功能。请参阅 jsFiddle 示例中的此部分：

   if(!this.$element.prop('multiple')){
       findValue = [findValue];
       this.$element.html();     // <-- if I do this for multiple then it breaks
   }
   

2. 这个整体解决方案很复杂。有没有更好的方法来实现在 Select2 中拥有大型本地 JSON 和无限滚动（具有获取/设置/更新值的能力，如下面的小提琴所示）？

这是我完整的jsFiddle here。

Answer 1

好的，深入了解source 我得出的结论是，我要做的是扭转 Select2 在其默认 selectAdapter 方法中所扮演的角色。我希望我的 json 数组是权威，而不是源选择：

1. 我还可以装饰另外两种重要的方法：select 和 unselect。
2. 由于我在初始化之外操作数组，所以我需要使用其他方式设置/更新数据。如果我直接在源选择上设置数据，这将没有意义，因为源选择不知道或不具有所有选项（数组包含它们，并返回选项的分页结果集）。
3. 我可以在源选择上使用jQuery's data 存储来设置值，然后触发更改并让Select2 的修饰方法获取该值并检查它是否存在。如果它存在，那么我们会将它添加到源元素中。我们还可以清除源选择上的任何其他选项，因为我们只需要选择的选项（因此我们可以在源选择上执行 .val() 并且表单也可以提交值）。这应该创建一个更清晰、更有凝聚力的代码！

新的jsFiddle here 有效。