Question

我有一个由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响应（不带结果，只是数组），它就可以正常工作。

我想念什么？

谢谢！

Answer 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
      };
    }
  }
});

Answer 2

我发现了这一点，并且正如预期的那样，我忽略了一个简单的方面：

Content-Type标头必须为application / json与text / html

Select2将不会加载远程json响应

2 个答案: