Select2 在打开 10.000 多个元素时很慢答案

【问题标题】：Select2 is slow on opening with 10.000+ elementsSelect2 在打开 10.000 多个元素时很慢
【发布时间】：2019-07-16 05:22:27
【问题描述】：

我正在使用 Select2 来填充下拉列表。 Select2 如果底层选择具有相当数量的项目，则在打开其下拉菜单时会很慢。我的下拉列表中有超过 10.000 多个元素。

这是我的代码：

$.ajax({
    url: "/Companies/GetCompanies",
    method: "get",
    success: function (data) {
        if (data != null) {
            var newWorkPlaceId = $("#newWorkPlaceId");
            newWorkPlaceId.empty();
            newWorkPlaceId.append("<option value=''> -- Choose-- </option>");

            $.each(data, function (index, item) {

                newWorkPlaceId.append(
                 $('<option>', {
                     value: item.id,
                     text: item.text
                 }, '</option>'));
            });
        $("#newWorkPlaceId").select2({
            placeholder: {
                id: "",
                placeholder: " -- Choose--"
            },
            allowClear: true
        });


        }
        clearconsole();
    }
});

有没有办法让 Select2 小部件（或其他可搜索的 dropdown）响应更快？

注意：我使用的是 ASP.NET CORE

【问题讨论】：

在一个选择元素中拥有 10k+ 个选项绝不是一个好主意：这将是糟糕的 UX 体验，因为 (1) 用户必须滚动浏览的选项数量以及 (2) 10k+ DOM 节点渲染会降低浏览器的速度。您应该考虑的是一个预先输入的解决方案，即在用户输入时建议选项。这样，您始终只显示可能选项的有限子集。

标签： javascript jquery jquery-select2

【解决方案1】：

你必须像下面这样使用 AJAX 数据和分页

$('#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;
    }
  }
});

示例

$('#mySelect2').select2({
  ajax: {
    url: function (params) {
      return 'https://api.github.com/search/repositories?q='+params.term+'&page='+params.page || 1;
    },
     processResults: function (data) {
        return {
            results: $.map(data.items, function (item) {
                return {
                    text: item.name,
                    id: item.id
                }
            })
        };
    }}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select style="width:50%" id="mySelect2"></select>

【讨论】：

【解决方案2】：

经过长期研究，我发现 2 个符号限制将帮助我解决此问题。这是我的解决方案

$("#newWorkPlaceId").select2({

    allowClear: true,
    placeholder: {
        id: "",
        placeholder: "Choose."
    },
    language: {
        inputTooShort: function (args) {

            return "2 or more symbol.";
        },
        noResults: function () {
            return "Not Found.";
        },
        searching: function () {
            return "Searching...";
        }
    },
    minimumInputLength: 2,
    ajax: {
        url: 'url',
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function(term) {
            return {
                term: term.term
            };
        },
        processResults: function (response) {
            return {
                results: response
            };
        }
    }
});

【讨论】：