Select2 本地分页/无限滚动

Question

我使用的是 select2 版本 4，并且有一个包含大约 16,000 个项目的列表。可以预见的是，这很慢（有时需要超过 5 秒才能打开），所以我正在尝试找到一种方法来加快速度。

目前我的数据正在使用 ajax 请求作为数组检索，然后使用 for 循环/附加插入到 select2/dom 中。

    $('#select').select2({
        placeholder: "Select"
    });

    $.ajax("/Example/Data", {
        type: 'GET'
    })
    .success(function (data, status, xhr) {
        var option = '<option></option>';
        for (var i = 0; i < data.length; i++) {
            var curId = data[i].district_id;
            var curDist = data[i].district_name;
            var curState = data[i].state_short;
            option += '<option value="' + curId + '">' + curDist + '('+ curState + ')' + ' - ' + curId + '</option>';
        }
        $('#select').append(option);
    });

我一直在尝试找到一种方法来像现在一样使用 ajax 请求来简单地检索数据，然后使用本地进行分页/无限滚动，但一直无法这样做

我已经尝试过完全实现这一点：http://embed.plnkr.co/sUt9zi 但我无法让它工作（可能是因为它使用的是 select2 v3.4.5）所以如果我们可以让它或类似的东西与 v4 一起工作，那将是很棒。

Answer 1

为了防止“缓慢”，您需要减少一次创建和附加所有 16k 选项元素的情况。为了做到这一点，select2 库文档在此处使用 AJAX 分页：https://select2.org/data-sources/ajax#pagination

但是，使用您提到的示例，我们可以通过执行类似的操作来使用本地数据集：

var testData = [];
var dataSize = 1000;

// Instead of doing this use the AJAX call to poulate the data.
for (var i=0; i < dataSize; i++) {
	testData.push({ text: `Data: ${i}`});
}

/* 
  Because you are sourcing your data via AJAX, this will 
    go in the success callback
*/
$("#testSelect").select2({
  data: testData,
  query: function(q) {
    var pageLength = 50;

    // Get a page sized slice of data from the results of filtering the data set.      
    var paged = this.data.slice((q.page - 1) * pageLength, q.page * pageLength);

    q.callback({
      results: paged,
      more: this.data.length >= q.page * pageLength
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/select2/3.4.5/select2.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/select2/3.4.5/select2.min.js"></script>

<input type="text" id="testSelect" style="width: 200px"/>

考虑使用服务器端来减少数据

您已经在使用远程数据源，但您需要传递一些参数来指示现在需要哪组数据。文档显示这样做：

$('#mySelect2').select2({
  ajax: {
    url: 'https://api.github.com/search/repositories',
    data: function (params) {
      var query = {
        search: params.term,
        page: params.page || 1
      }

      // Query parameters will be ?search=[term]&page=[page]
      return query;
    }
  }
});

查询属性对于传递当前页面很重要。这允许您在 sql 查询中设置OFFSET。假设您使用的是 mysql，您的端点将进行类似于以下的查询：

function getPageOfData(pageNum) {
  var pageLength = 50;
  var pageStart = (pageNum - 1) * pageLength;
  var pageEnd = pageStart + pageLength;

  var query = 'SELECT * FROM tbl LIMIT ' + pageStart + ',' + pageEnd;
}

服务器端分页设置起来有点复杂，因为它需要客户端传递这些参数并且服务器用有限的数据集进行回复，但它将是处理像您这样的大型数据集的最佳选择。