jquery - 大量项目的 Select2 性能

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 embed 不支持 IE8，因此请使用以下链接在 IE8 上尝试: http://run.plnkr.co/plunks/db8SXs/