Question

我有一个相当简单的要求集，但不能为我的生活弄清楚如何用Select2实现它......

我想在页面上输入
用户可以键入以触发AJAX调用
其中还显示了用户可以单击的预加载选项列表，而不是键入以触发AJAX。
如果您关闭（模糊）输入然后再次重新打开它，则仍应显示先前加载的AJAX响应（而不是选项为空白，您必须开始键入以再次加载它们。）

我可以做＃1和＃2（当然是＃1和＃3！），但我无法在一个输入字段中获得所有这三个要求。我没有找到任何方法去做＃4。

实际上，为了实现＃3，我想我正在寻找一种方法将我的候选名单注入通常是ajax返回的选项，并使用＃4之类的东西确保在打开字段时不清除这些选项

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

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

P.S。我已经在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

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

1 个答案: