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

防止“慢”＆＃39;您需要一次缓解创建和追加所有16k选项元素的过程。为了做到这一点，Field_1 : [__________] Field_2 : [___________] Field_3 : [__________] Drag_FLD: [-----------] //Preferred Field_5 : [__________] Field_4 : [___________] Field_6 : [__________]库在这里使用AJAX进行分页：https://select2.org/data-sources/ajax#pagination

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

＆＃13;

select2

＆＃13;

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

＆＃13;

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

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

<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"/>

查询属性对于传递当前页面很重要。这允许您在SQL查询中设置$('#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; } } });。假设您正在使用mysql，您的端点将进行类似于以下的查询：

OFFSET

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

选择2本地分页/无限滚动

1 个答案: