Select2 не работает изменить значение из jQuery (dataAdapter) - PullRequest
Новая
       10

Select2 не работает изменить значение из jQuery (dataAdapter)

0 голосов
/ 17 сентября 2018

У меня есть огромный источник данных 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) {}

, которая должна создать данные, а затемfunction:

CustomData.prototype.query = function (params, callback) {}

должен только фильтровать их.

Не могли бы вы мне помочь, как мне реализовать инициализацию select2, которая может работать со многими опциями и может быть установлена ​​из jQuery?

1 Ответ

0 голосов
/ 30 апреля 2019

С помощью специального адаптера данных нумерация страниц не требуется: 


// 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"),
});
...