web-dev-qa-db-ja.com

アイテムの大規模なセットのSelect2パフォーマンス

Twitterブートストラップでselect2 jqueryプラグインを使用しています。アイテムの数が少ない場合は正常に機能します。しかし、リストが非常に大きい場合（1500を超えるアイテム）、実際には速度が低下します。 IEで最も遅いです。

通常のドロップダウンリストは、1500を超えるアイテムで非常に高速に動作します。この状況の回避策はありますか？

jqueryjquery-select2
38
Manish

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/

42
MarcusAsplund

それは古い質問であることは知っていますが、私にとってうまくいったことを共有したかったのです。あなたがmustmust（-===-）を事前にロードする場合（ゼロから始めるか、他の誰かのコードに基づいて構築するかによって、これはより簡単かもしれません）、ドキュメントで here の説明に従ってminimumInputLengthを使用します。オプションの膨大なリストは、ユーザーが数文字を入力するまで表示されません。これにより、Select2ドロップダウンが実際に選択されたときにレンダリングする際のパフォーマンスヒットが大幅に減少します。お役に立てば幸いです！

25
BammaHamma

したがって、1500を超える実際の要素を<option>sの形式でページにロードすると、ページのパフォーマンスが低下する可能性があることに注意してください。ユーザーがコメントで提案したように、値を返すバックエンドサービスに対してAJAX呼び出しを行うことにより、パフォーマンスの問題を解決できます。

Select2 Ajax how-to

7
Kelz

Select2 v4の動作バージョンは次のとおりです

答えに基づいて here ：を変更し、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/

編集：Fiddle変更。

4
lofihelsinki

これは非常に古い質問と回答であり、select2の新しいバージョンもあります。しかし、誰かがoptgroupでも検索しようとしている場合。このソリューションを試すことができます。

http://jsfiddle.net/na1zLkz3/4/

    // Function to shuffle the demo data 
var shuffle = function (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
var mockData = function () {
    var array = _.map(_.range(1, 10), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
  };
  var mockData1 = function () {
    var array = _.map(_.range(10, 15), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
  };
  var mockData2 = function () {
    var array = _.map(_.range(15, 20), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
  };
  // create demo data
  var dummyData = mockData();
  var dummyData1 = mockData1();
  var dummyData2 = mockData2();
  dummyData.Push({
  text: 'canada',
  children: dummyData1
  });
  dummyData.Push({
  text: 'USA',
  children: dummyData2
  });

  // init select 2
  $('#ddlCar').select2({
    data             : dummyData,
    // init selected from elements value
    initSelection    : function (element, callback) {
      var initialData = [];
      $(element.val().split(",")).each(function () {
        initialData.Push({
          id  : this,
          text: this
        });
      });
      callback(initialData);
    },

    // NOT NEEDED: These are just css for the demo data
    dropdownCssClass : 'capitalize',
    containerCssClass: 'capitalize',

    // NOT NEEDED: text for loading more results
    formatLoadMore   : function() {return 'Loading more...'},

    // query with pagination
    query            : function (q) {
      var pageSize,
        results;
      pageSize = 20; // or whatever pagesize
      var results  = [];
      if (q.term && q.term !== "") {
        // HEADS UP; for the _.filter function i use underscore (actually lo-dash) here
        var results = this.data;
        var results = _.filter(results, function (e) {
            if(typeof e.children != 'undefined')
          {
            subresults = _.filter(e.children, function (f) {
                return (f.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
            });
            if(subresults.length > 0)
                return true;
            return false;
          }
          return (e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
        });
        newresults = [];
        for (var i = 0, len = results.length; i < len; i++) {
        newresults[i] = {};
        if(typeof results[i].text != 'undefined')
            newresults[i].text = results[i].text;
        if(typeof results[i].id != 'undefined')
            newresults[i].id = results[i].id;
        if(typeof results[i].children != 'undefined')
        {
            newresults[i].children = results[i].children;
            newresults[i].children = _.filter(newresults[i].children, function (f)                          {
                return (f.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
            });
        }
      }
      results = newresults;
      } else if (q.term === "") {
        results = this.data;

      }

      q.callback({
        results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
        more   : results.length >= q.page * pageSize
      });
    }
  });
4
Maulik Vora

私にとって最も簡単な作品は：

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

必要に応じて、minimumInputLengthの値を変更できます。

この方法では、select2はリスト全体を表示する必要はなく、入力された文字数が固定された後にのみ結果を表示します。あなたはまだフロントエンドコードでリストの大きな配列を持っていますが。

また、allowClearを使用している場合、次のようにプレースホドラーを宣言する必要があります。

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

こちらのドキュメントを確認してください http://select2.github.io/select2

2
Jaber Al Nahian