Select2 不会加载远程 json 响应

Question

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

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

当我在Select2的文档网站上查看文档时，我似乎正确地遵循了它。这是我在网页上使用的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

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

内容类型标头需要是application/json与text/html/