Question

我有一个从静态文件加载到内存中的巨大json数据源（超过50,000多行）。

注意：为什么我将它保存在静态文件中并不重要。

我使用的select2（v 4.0.5）初始化为：

function initSelect2(selectName, dataSelect) {
var pageSize = 20;

    $.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) {
                if (!("page" in params)) {
                    params.page = 1;
                }

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

            $('#mySelect3').select2({
                ajax: {},
                dataAdapter: CustomData,
                width: '100%'
            });
        }); 
}

我有一个大问题。我无法设置要从jQuery选择的值。如果我这样尝试：

$（“＃mySelect3”）。val（17003）.trigger（“ change”）;

什么都不会发生。但是我认为我做得不好。如果我了解文档，我认为我应该实现功能：

CustomData.prototype.current =函数（回调）{}

应创建数据，然后运行：

CustomData.prototype.query =函数（参数，回调）{}

仅应过滤它们。

您能帮我吗，我该如何实现select2初始化，它可以使用许多选项，并且可以通过jQuery进行设置？

Answer 1

使用自定义数据适配器，您无需分页：


// create huge array 
function mockData() {
    var hugeArray = [];
    for (let i = 0; i < 50000; i++) {
        el = {
            id: i,
            text: 'My mock data ' + i,
        };
        hugeArray.push(el);
    }
    return hugeArray;
};

// define custom dataAdapter
$.fn.select2.amd.define("myCustomDataAdapter", 
    ['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 data = {
                // here replace mockData() by your array
                results: mockData()
            };

            callback(data);

        };

        return CustomData;

    }
);

//
$('#mySelect3').select2({
    allowClear: true,
    // use dataAdapter here
    dataAdapter:$.fn.select2.amd.require("myCustomDataAdapter"),
});

通过搜索，您可以这样做：


// create huge array 
function mockData() {
    var hugeArray = [];
    for (let i = 0; i < 50000; i++) {
        el = {
            id: i,
            text: 'My mock data ' + i,
        };
        hugeArray.push(el);
    }
    return hugeArray;
};

// define custom dataAdapter
$.fn.select2.amd.define("myCustomDataAdapter", 
    ['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 data = {
                // here replace mockData() by your array
                results: mockData()
            };

            if ($.trim(params.term) === '') {
                callback(data);

            } else {

                if (typeof data.results === 'undefined') {
                    return null;
                }

                var filteredResults = [];

                data.results.forEach(function (el) {
                    if (el.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
                        filteredResults.push(el);
                    }
                });

                if (filteredResults.length) {
                    var modifiedData = $.extend({}, data, true);
                    modifiedData.results = filteredResults;
                    callback(modifiedData);
                }

                return null;

            }
        };

        return CustomData;

    }
);

//
$('#mySelect3').select2({
    minimumInputLength: 2,
    tags: false,
    allowClear: true,
    // use dataAdapter here
    dataAdapter:$.fn.select2.amd.require("myCustomDataAdapter"),
});

Answer 2

我遇到了同样的问题，这就是我解决的方法。

注意：我们使用dataAdapter是因为我们要处理大量数据，所以我假设您的下拉列表将包含大量数据。

在通过查询实现DataAdapter之后，使用此示例初始化select2。

if(selectedValue !== null )
   {
      $("#item_value").select2({
         placeholder: 'Select an option',
         allowClear: true,
         disabled: false,
         formatLoadMore: 'Loading more...',
         ajax: {},
         data: [{ id: selectedValue, text: selectedValue }],
         dataAdapter: customData
      });

      $("#item_value").val(selectedValue).trigger('change');
   }else{
      $("#item_value").select2({
         placeholder: 'Select an option',
         allowClear: true,
         disabled: false,
         formatLoadMore: 'Loading more...',
         ajax: {},
         dataAdapter: customData
      });
   }

要在select2中设置选定的值，您需要将一些数据传递到data选项，但是由于我们要处理大量数据。您无法传递完整的大数据数组，因为这将导致浏览器窗口冻结并导致不良的用户性能。但是，只能使用从数据库或变量获得的选定值来设置数据选项。

我希望这会有所帮助。

Select2无法正常工作，无法从jQuery（dataAdapter）更改值

2 个答案: