javascript - 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;
}

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