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

Question

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

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有效。