如何通过Ajax请求将Select2与JSON结合使用？
如何通过Ajax请求将Select2与JSON结合使用？
提问于 2014-01-05 05:02:01
我的Select2 3.4.5不能处理JSON数据。
这是我在HTML上的输入框：
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />…还有我的JavaScript
$(".itemSearch").select2({
placeholder: "Search for an Item",
minimumInputLength: 2,
ajax: {
url: "/api/productSearch",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
option: term
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.itemName,
more: more
};
}
},
formatResult: function (data, term) {
return data;
},
formatSelection: function (data) {
return data;
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) {
return m;
}
});我用Laravel 4做了一个API，每当我在文本框中输入任何内容时，它都会返回值。
如果我在文本框中输入"test“，结果如下：
[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]我无法将结果添加到我的Select2下拉列表中。我认为是formatSelection和formatResult导致了这个问题，因为我不知道应该给它设置什么参数。我不知道从哪里获取容器、对象和查询等参数以及它应该返回的值，或者我的JSON响应是错误的？
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-02-06 19:52:41
下面是一个示例
$("#profiles-thread").select2({
minimumInputLength: 2,
tags: [],
ajax: {
url: URL,
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.completeName,
slug: item.slug,
id: item.id
}
})
};
}
}
});这相当简单
Stack Overflow用户
发布于 2016-05-07 06:29:55
在版本4.0.2中，只是在processResults和result中略有不同：
processResults: function (data) {
return {
results: $.map(data.items, function (item) {
return {
text: item.tag_value,
id: item.tag_id
}
})
};
}您必须在result中添加data.items。items是Json名称：
{
"items": [
{"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
{"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
]
}Stack Overflow用户
发布于 2017-05-18 04:12:02
这就是我如何解决我的问题，我正在获取数据变量中的数据，并通过使用上面的解决方案，我得到了错误could not load results。我不得不在processResults中以不同的方式解析结果。
searchBar.select2({
ajax: {
url: "/search/live/results/",
dataType: 'json',
headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
delay: 250,
type: 'GET',
data: function (params) {
return {
q: params.term, // search term
};
},
processResults: function (data) {
var arr = []
$.each(data, function (index, value) {
arr.push({
id: index,
text: value
})
})
return {
results: arr
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20926707
复制相关文章
相似问题
腾讯云开发者
