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

Question

我正在使用 Select2 库通过 ajax 远程加载数据。但是，我还想提供一个默认选项“全部”。现在，我可以很容易地使用 {name: 'All', id: 'all'} 对象来扩充“结果”数组，并且我可以做到这一点，因此最初选择了“All”，但我想要的是有些人甚至在输入最小输入长度之前就将“全部”视为一个选项。

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

Answer 1

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

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

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 的选项。但是，这意味着您不会在下拉列表中收到“请输入 2 个或更多字符”消息。 (除非你自己以某种方式实现它。)

jsfiddle

---

这是一个 jsfiddle实现“请输入 2 个或更多字符”消息。