为大量项目选择2表现

Question

我正在使用带有twitter bootstrap的select2 jquery插件.它适用于较少数量的物品.但是当列表很大(超过1500项)时,它确实会变慢.它在IE中速度最慢.

正常下拉列表工作速度非常快,超过1500项.这种情况有没有解决方法？

Answer 1

即使在IE8中,您也可以通过对建议进行分页来使这项工作变得更好

码:

// Function to shuffle the demo data
function shuffle(str) {
  return str
    .split('')
    .sort(function() {
      return 0.5 - Math.random();
  })
.join('');
}

// For demonstration purposes we first make
// a huge array of demo data (20 000 items)
// HEADS UP; for the _.map function i use underscore (actually lo-dash) here
function mockData() {
  return _.map(_.range(1, 20000), function(i) {
    return {
      id: i,
      text: shuffle('te ststr ing to shuffle') + ' ' + i,
    };
  });
}
(function() {
  // init select 2
  $('#test').select2({
    data: mockData(),
    placeholder: 'search',
    multiple: true,
    // query with pagination
    query: function(q) {
      var pageSize,
        results,
        that = this;
      pageSize = 20; // or whatever pagesize
      results = [];
      if (q.term && q.term !== '') {
        // HEADS UP; for the _.filter function i use underscore (actually lo-dash) here
        results = _.filter(that.data, function(e) {
          return e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0;
        });
      } else if (q.term === '') {
        results = that.data;
      }
      q.callback({
        results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
        more: results.length >= q.page * pageSize,
      });
    },
  });
})();

这里有20000个项目的工作示例:http: //embed.plnkr.co/db8SXs/preview

plnkr嵌入不支持IE8,所以在IE8上尝试使用此链接:http://run.plnkr.co/plunks/db8SXs/

Answer 2

我知道这是一个老问题,但我想分享对我有用的东西.如果你必须预先加载大名单(取决于如果你从别人的代码划伤或建筑开始,这可能是更容易),使用minimumInputLength所描述这里的文档.在用户输入几个字符之前,不会显示巨大的选项列表.当实际选择Select2下拉列表时,这会大大降低渲染时的性能.希望有所帮助!

Answer 3

这是 Select2 v4 的工作版本

基于此处的答案：并对其进行了修改以使用 lo-dash 进行搜索

$(function () {
    items = []
    for (var i = 0; i < 1000; i++) {
        items.push({ id: i, text : "item " + i})
    }

    pageSize = 50

    jQuery.fn.select2.amd.require(["select2/data/array", "select2/utils"],

    function (ArrayData, Utils) {
        function CustomData($element, options) {
            CustomData.__super__.constructor.call(this, $element, options);
        }
        Utils.Extend(CustomData, ArrayData);

        CustomData.prototype.query = function (params, callback) {

            var results = [];
            if (params.term && params.term !== '') {
              results = _.filter(items, function(e) {
                return e.text.toUpperCase().indexOf(params.term.toUpperCase()) >= 0;
              });
            } else {
              results = items;
            }

            if (!("page" in params)) {
                params.page = 1;
            }
            var data = {};
            data.results = results.slice((params.page - 1) * pageSize, params.page * pageSize);
            data.pagination = {};
            data.pagination.more = params.page * pageSize < results.length;
            callback(data);
        };

        $(document).ready(function () {
            $("select").select2({
                ajax: {},
                dataAdapter: CustomData
            });
        });
    })
});

JsFiddle：http : //jsfiddle.net/nea053tw/

编辑：小提琴改变了。

Answer 4

因此请记住,您正在以<option>s 的形式将> 1500个实际元素加载到页面上,这最终可能会损害页面性能.正如用户在评论中建议的那样,您可以通过对将返回您的值的后端服务进行AJAX调用来解决性能问题.

Select2 Ajax操作方法

Answer 5

对我来说最简单和最短的工作是：

$(".client_id").select2({
   minimumInputLength: 2
 });

您可以根据需要更改 minimumInputLength 的值。

这样，select2 就不必显示整个列表，而是只有在输入固定数量的字符后才会显示结果。尽管您在前端代码中仍然拥有大量列表。

另外，如果您使用的是allowClear，那么您必须像这样声明placehodler：

$(".client_id").select2({
    minimumInputLength: 2,
    allowClear: true,
    placeholder: '--Select Client--'
 });

检查这里的文档http://select2.github.io/select2

如果您的数据仍然太大并且仍然存在性能问题，请使用 Ajax 方法。最好不要在 select 中加载太大的数据，而是使用 Ajax for Select2 https://select2.org/data-sources/ajax