Select2在打开超过1万个元素的列表时很慢。

Question

我正在使用Select2来填充下拉列表。如果底层的选择框有很多项目，Select2在打开下拉菜单时会很慢。我的下拉列表中有超过1万个元素。

这是我的代码：

$.ajax({
    url: "/Companies/GetCompanies",
    method: "get",
    success: function (data) {
        if (data != null) {
            var newWorkPlaceId = $("#newWorkPlaceId");
            newWorkPlaceId.empty();
            newWorkPlaceId.append("");
            $.each(data, function (index, item) {
                newWorkPlaceId.append(
                 $(''));
            });
        $("#newWorkPlaceId").select2({
            placeholder: {
                id: "",
                placeholder: " -- Choose--"
            },
            allowClear: true
        });
        }
        clearconsole();
    }
});

我想知道是否有办法让Select2控件（或其他可搜索的下拉列表）响应得更快？
注意：我使用的是ASP.NET CORE

gsm2009 · Answer

你必须像下面这样使用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
                }
            })
        };
    }}
});

gsm2009 · Answer

经过长时间的研究，我发现两个符号的限制可以帮助我解决这个问题。这是我的解决方案

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

gsm2009 · Answer

在一个选择框中有超过1万个选项是不明智的：这会导致用户体验很差，因为（1）用户必须滚动浏览很多选择，（2）1万多个DOM节点的渲染会拖慢浏览器的速度。你应该考虑的是一个自动提示的解决方案，即根据用户输入的内容提示选项。这样，你总是只显示有限的一部分可能的选项。

gsm2009 · Answer

感谢你提供了这个解决方案，它非常有效！但是我无法将下拉列表中的一个项目设为选中项。请帮帮我。