Select2无法从jQuery（dataAdapter）更改值

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 = function（callback）{}

应该创建数据，然后功能：

CustomData.prototype.query = function（params，callback）{}

应该只过滤它们。

你可以帮助我，我如何实现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"),
});