选择选项中有大量数据时，选择2非常慢

Question

我正在使用select 2插件进行多项选择。当我在select 2框中单击时，速度非常慢。显示选项列表或使输入框可用于键入需要时间。可能是因为数据量大。

这是代码

    <select multiple class="chosen-multi-select" name="related_cities[]">
      <?php if(!empty($all_locations)){
        foreach($all_locations as $l):
        ?>
      <option value="<?php echo $l->id;?>"  <?php if(in_array($l->id,$related_selected)){ echo "selected"; } ?> ><?php echo $l->location;?></option>
      <?php endforeach; } ?>
    </select>

这里$l变量有10000多个结果。如何解决此问题。

Answer 1

我最近遇到了同样的问题，并通过编写一个自定义适配器成功地解决了这个问题。

这是我的select2 v4x解决方案

$.fn.select2.amd.define(
    "select2/data/customArray",
    [
        'select2/data/array',
        'select2/utils'
    ],
    function(ArrayAdapter, Utils) {
        function CustomArrayAdapter ($element, options) {
            var data = options.get("data");
            var pageLength = options.get("pageLength");

            this._data = data ? Array.from(data) : this._items($element);
            this._pageLength = pageLength || 25;

            CustomArrayAdapter.__super__.constructor.call(this, $element, options);
        };

        Utils.Extend(CustomArrayAdapter, ArrayAdapter);

        CustomArrayAdapter.prototype.query = function (params, callback) {
            var pageLength = this._pageLength;
            var page = params.page || 1;
            var term = params.term;
            var pagedData = [];
            var data = this._data;

            if (!!term) {
                data = data.filter(function (elemData) {
                    return (elemData.text.toLowerCase().indexOf(term.toLowerCase()) > -1)
                });
            }

            pagedData = data.slice(
                (page - 1) * pageLength,
                page * pageLength
            );

            callback({
                results: pagedData,
                pagination: {
                    more: data.length >= (page * pageLength)
                }
            });
        };

        CustomArrayAdapter.prototype._items = function($element) {
            var data = [];
            var self = this;

            var $options = $element.children();

            $options.each(function () {
                if (
                    this.tagName.toLowerCase() !== 'option' &&
                    this.tagName.toLowerCase() !== 'optgroup'
                ) {
                    return;
                }

                var $option = $(this);
                var option = self.item($option);

                data.push(option);
            });

            return data;
        }

        return CustomArrayAdapter;
    }
);

现在，这一个处理分页和搜索简单用例。但是，分页不能简单地工作，因为select2应该正确处理结果。

如果我们使用ajax数据，默认适配器会处理它，在我们的情况下，我们需要自己处理它。

因此，您将使用以下选项初始化您的select2。

$('select[name="related_cities[]"]').select2({
    pageLength: 15,
    dataAdapter: $.fn.select2.amd.require('select2/data/customArray'),
    resultsAdapter: $.fn.select2.amd.require(
        [
            'select2/utils',
            'select2/results',
            'select2/dropdown/infiniteScroll'
        ],
        function(Utils, ResultsList, InfiniteScroll) {
            var CustomResultsList = ResultsList;

            CustomResultsList = Utils.Decorate(
                 CustomResultsList,
                 InfiniteScroll
            );

            // If you want additional support functionalities
            // you would decorate this with the corresponding decorators.
            // please refer to the advanced section of select2 documentation

            return CustomResultsList;
        }
    )
});