javascript - Select2 - 使用预加载选项创建 ajax

Question

我有一个相当简单的要求集，但我无法弄清楚如何使用 Select2 来实现它...

1. 我想在页面上输入内容
2. 用户可以在其中输入内容以触发 AJAX 调用
3. 其中还会显示预加载的选项列表，用户可以单击这些选项，而无需键入来触发 AJAX。
4. 如果您关闭(模糊)输入，然后再次重新打开它，则之前加载的 AJAX 响应仍应显示(而不是选项为空，您必须开始输入才能再次加载它们)。

我可以执行 #1 和 #2(当然也可以执行 #1 和 #3!)，但我无法在一个输入字段中获得所有三个要求。我还没有找到任何方法来执行#4。

实际上，为了实现＃3，我想我正在寻找一种方法将我的候选列表注入(inject)到通常是ajax返回的选项中，并使用类似＃4的东西来确保打开字段时这些不会被清除.

有没有办法初始化 Select2 字段的选项(通常是 Ajax 加载)？我尝试过传递 data 但它不起作用，我尝试使用 initSelection 直到我意识到这不相关，我尝试了各种方法，但无济于事......

希望这是可能的，我只是在某个地方错过了一个选项!

附注我在 Stack 上读过几个标题与此类似的帖子，但似乎没有一个回答这个问题。如果我错过了重要的一件事，请告诉我!

Answer 1

我认为如果您使用 Select2 的 query 选项而不是 ajax 选项，您就可以做到这一点。这样，如果输入了任何字符，您就可以发出 ajax 请求，但如果没有输入字符，则显示默认列表。

如果您的默认选项定义如下:

var DEFAULT_OPTIONS = [
    { id: 'def1', text: 'Default Choice 1' },
    { id: 'def2', text: 'Default Choice 2' },
    { id: 'def3', text: 'Default Choice 3' }
];

您可以执行以下操作:

var lastOptions = DEFAULT_OPTIONS;

$('#select').select2({
    minimumInputLength: 0,
    query: function(options) {
        if (options.term) {
            $.ajax({
                type: 'post', // Or 'get' if appropriate
                url: 'your_ajax_url',
                dataType: 'json',
                data: {
                    term: options.term // Change name to what is expected
                },
                success: function(data) {
                    lastOptions = data;
                    options.callback({ results: data });
                }
           });
        } else {
            options.callback({ results: lastOptions });
        }
    }
});

<强> jsfiddle