Select2 不会加载远程 json 响应答案

【问题标题】：Select2 won't load remote json responseSelect2 不会加载远程 json 响应
【发布时间】：2018-11-01 15:06:43
【问题描述】：

我有一个由 Select2 (v4.0.5) 调用的 API，但是控制台中的调试消息显示：

Select2：AJAX 结果未在响应的results 键中返回数组。

当我查看Select2's documentation site 的文档时，我似乎正确地遵循了它。这是我在网页上使用的 javascript：

$('#account_id').select2({
  debug: true,
  minimumInputLength: 3,
  dataType: 'json',
  ajax: {
    url: '/api/account-query',
    data: function (params) {
      var query = {
        search: params.term,
        v: "new"
      }
      return query;
    },
  }
});

这是来自 API 的响应（敏感位已编辑）：

{
  "results": [{
    "id": "redacted-1",
    "text": "text redacted 1"
  },{
    "id": "redacted-2",
    "text": "text redacted 2"
  },{
    "id": "redacted-3",
    "text": "text redacted 3"
  },{
    "id": "redacted-4",
    "text": "text redacted 4"
  },{
    "id": "redacted-5",
    "text": "text redacted 5"
  }]
}

如果我使用 select2 代码并为其提供静态 json 响应（没有预先设置结果，只是数组），它就可以正常工作。

我错过了什么？

谢谢！

【问题讨论】：

您使用的是哪个版本的 select2？
@lealceldeiro 4.0.5，我把它放在原来的。

标签： javascript jquery ajax jquery-select2

【解决方案1】：

您必须提供 processResults 回调函数，以便 Select2 能够以正确的方式呈现结果。

我创建了一个 jsfiddle (https://jsfiddle.net/shcavbng/) 演示来做同样的事情。

$('#account_id').select2({
  debug: true,
  minimumInputLength: 3,
  dataType: 'json',
  ajax: {
    url: 'https://reqres.in/api/users',
    data: function (params) {
    console.log('params =>' , params);
      var query = {
        search: params.term,
        v: "new"
      }
      return query;
    },
    processResults: function (data) {
      console.log('results =>' , data);
      data = data.data.reduce(function(o,i){o.push({id:i.id,text:i.first_name});return o;},[]);
       console.log('results =>' , data);
      return {
        results: data
      };
    }
  }
});

【讨论】：

我的 API 响应已经采用正确的格式，我不应该处理结果并将其转换为已经采用的相同格式，除非我遗漏了什么？
在问题描述中，您提到 API 响应不包含 results 键。 Select2: The AJAX results did not return an array in the results key of the response.
您查看我的 API 响应了吗？它清楚地显示了结果键，对吗？如果不是，应该如何构建 API 响应？谢谢。
添加 processResults 回调和第一个控制台日志，看看你得到了什么值，如果它不同，那么像这样的结构 data = data.data.reduce(function(o,i){o.push({id:i.id,text:i.first_name});return o;},[]);.
我得到的结构匹配 select2 文档

【解决方案2】：

我想通了，不出所料，我忽略了一个简单的方面：

Content-Type 标头需要是 application/json vs text/html

【讨论】：