如何用AJAX预加载select2插件？

Question

在此示例中：https://jsfiddle.net/wqd4ebyn/2/：

$(document).ready(function() {
    $('.js-example-basic-single').select2(
      {
          ajax: {
          url: 'https://jsonplaceholder.typicode.com/todos',
          dataType: 'json'
          }
      }
    );
});

我正在尝试使用ajax获取远程数据并使用当前选项预加载列表。除非我删除了ajax，否则它不起作用：

$(document).ready(function() {
    $('.js-example-basic-single').select2(
    );
});

我的列表太大了。我想要的是列出一些非常常见的选项，其余的由ajax列出。当前的实现确实允许两者兼而有之，静态选项或动态选项。我需要两者。

Answer 1

请查看官方文件：https://select2.org/data-sources/ajax您需要有一个处理请求参数的函数和另一个处理响应数据的函数。

你试过这个吗？如何通过Ajax请求将Select2与JSON一起使用？

编辑：我在这里创建了一个JSFIddle与您的代码：https://jsfiddle.net/7bdeo38c/6/

HTML：

<select class="js-example-basic-single" name="state"></select>

JS：

$(document).ready(function() {
    $('.js-example-basic-single').select2(
      {
        ajax: {
          url: 'https://jsonplaceholder.typicode.com/todos',
          dataType: 'json',
          data: function (params) {
            return {
              q: params.term // search term
            };
          },
          processResults: function (data) {
            return {
              results: data // results
            };
          }
        },
        templateResult: formatResults, // Controls how the dropdown looks
        templateSelection: formatSelection, // Controls what is displayed after selecting an item
        escapeMarkup: function (m) { return m; }, // Let our custom formatter work
      }
    );
});

function formatResults (data) {
  if (data.loading) {
    return data.text;
  }

  var result;
  if (data.completed) {
        result = "<div class='select2-result-repository__description'>" + data.title + "</div>";
  }
  return result;
}

function formatSelection (data) {
  return data.id + ' - ' + data.title || data.text;
}

官方Select2文档中也有类似的示例。有关GitHub存储库示例的完整代码，请参见Ajax一章的末尾。https://select2.org/data-sources/ajax