jquery - 更新 select2 数据而不重建控件

Question

我正在转换 <input type="hidden">到 select2 下拉列表并通过查询方法向其提供数据

$('#inputhidden').select2({
    query: function( query ) {
        query.callback( data ); // the data is in the format select2 expects and all works well..
    );
});

问题是我需要破解 select2 UI 并将两个按钮放置在搜索栏顶部，单击这些按钮时，将执行 ajax 调用，并且必须更新 select2 内容。

现在，我需要在不完全重建 select2 的情况下进行这些更新，而只是刷新下拉列表中的项目。我找不到将一组新数据传递给已创建的 select2 控件的方法，这可能吗？

Answer 1

选择2 v3.x

如果您有带有选项的本地数组(通过ajax调用接收)，我认为您应该使用data参数作为返回选择框结果的函数:

var pills = [{id:0, text: "red"}, {id:1, text: "blue"}]; 

$('#selectpill').select2({
    placeholder: "Select a pill",
    data: function() { return {results: pills}; }
});

$('#uppercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toUpperCase();
    });
});
$('#newresults').click(function() {
    pills = [{id:0, text: "white"}, {id:1, text: "black"}];
});

FIDDLE: http://jsfiddle.net/RVnfn/576/

如果您使用按钮自定义 select2 界面，只需调用 updateResults (此方法不允许从 select2 对象的外部调用，但您可以将其添加到 allowedMethods 数组中如果需要，请在 select2 中)更新数据数组(示例中的丸)后的方法。

<小时/>

select2 v4:自定义数据适配器

具有附加 updateOptions 的自定义数据适配器(不清楚为什么原始 ArrayAdapter 缺乏此功能)方法可用于动态更新选项列表(本例中的所有选项):

$.fn.select2.amd.define('select2/data/customAdapter',
    ['select2/data/array', 'select2/utils'],
    function (ArrayAdapter, Utils) {
        function CustomDataAdapter ($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
        }
        Utils.Extend(CustomDataAdapter, ArrayAdapter);
        CustomDataAdapter.prototype.updateOptions = function (data) {
            this.$element.find('option').remove(); // remove all options
            this.addOptions(this.convertToOptions(data));
        }        
        return CustomDataAdapter;
    }
);

var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');

var sel = $('select').select2({
    dataAdapter: customAdapter,
    data: pills
});

$('#uppercase').click(function() {
    $.each(pills, function(idx, val) {
        pills[idx].text = val.text.toUpperCase();
    });
    sel.data('select2').dataAdapter.updateOptions(pills);
});

FIDDLE: https://jsfiddle.net/xu48n36c/1/

<小时/>

select2 v4:ajax传输函数

在 v4 中，您可以定义可以使用本地数据数组的自定义传输方法(例如 @Caleb_Kiage，我已经使用它但没有成功)

文档:https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used

Select2 uses the transport method defined in ajax.transport to send requests to your API. By default, this transport method is jQuery.ajax but this can be changed.

$('select').select2({
    ajax: {
        transport: function(params, success, failure) {
            var items = pills;
            // fitering if params.data.q available
            if (params.data && params.data.q) {
                items = items.filter(function(item) {
                    return new RegExp(params.data.q).test(item.text);
                });
            }
            var promise = new Promise(function(resolve, reject) {
                resolve({results: items});
            });
            promise.then(success);
            promise.catch(failure);
        }
    }
});

但是使用此方法，如果数组中选项的文本发生更改，则需要更改选项的 id - 内部 select2 dom 选项元素列表未修改。如果数组中选项的 id 保持不变 - 将显示以前保存的选项，而不是从数组更新!如果仅通过向其中添加新项目来修改数组，那么这不是问题 - 对于大多数常见情况都可以。

FIDDLE: https://jsfiddle.net/xu48n36c/3/