使用 Select2 远程加载设置默认选项

Question

我正在使用 Select2 库通过 ajax 远程加载数据。但是，我还想提供一个默认选项 "all"。现在，我很容易用 {name: 'All', id: 'all'} 对象扩充 "results" 数组，我可以做到 'All' 最初是已选中，但我想要的是有人甚至在输入最小输入长度之前就将 'All' 视为一个选项。

这可能吗？有人知道如何实现吗？

Answer 1

注意：此答案适用于 Select2 3.5.2 或更早版本。 Select2 4.0 的解决方案将使用 DataAdapter。

您可以提供自定义 query 函数。实现此功能时，可以使用Select2ajax函数，因为它是公开的

var ALL_OPTION = { id: 'ALL', text: 'All' };

$('#select').select2({
    _minimumInputLength: 2,
    _ajaxQuery: Select2.query.ajax({
        // Place all your ajax options here, as if you were using
        // the Select2 "ajax" option.
    }),
    query: function(options) {
        if (options.term.length >= this._minimumInputLength) {
            this._ajaxQuery.call(this, options);
        } else {
            options.callback({ results: [ALL_OPTION] });
        }
    }
});

您不能使用 minimumInputLength 选项，因为它会阻止调用 query 函数。相反，上面的代码在 query 函数中使用了一个名为 _minimumInputLength 的选项。但是，这意味着您不会在下拉列表中看到 "Please enter 2 or more characters" 消息。（除非你自己以某种方式实现它。）

jsfiddle

这是实现 "Please enter 2 or more characters" 消息的 jsfiddle。

使用 Select2 远程加载设置默认选项

Setting default option with Select2 remote loading

javascript

ajax

jquery

jquery-select2