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

Select2 - create ajax with pre-loaded options

本文关键字：选项 创建 ajax 加载 选择      更新时间：2023-09-26

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

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

2（当然是#1和#3！），但我不能在一个输入字段中得到所有三个要求。我还没有找到任何方法来做#4。

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

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

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

附言我已经在 Stack 上阅读了几个与此标题相似的线程，但它们似乎都没有回答这个问题。如果我错过了至关重要的，请告诉我！

我认为如果您

使用 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 });
        }
    }
});

斯菲德尔

相关文章：