我的 JSON 响应数据不包含 ID 字段,而 Select2 需要该字段才能显示结果。在文档中,他们提供了一种生成 id 的方法,但是我无法这样做。有人可以提供一个关于如何执行此操作的示例吗?到目前为止我已经尝试过:
$('.itemSearch').select2(
ajax: {
type: "POST",
url: '/Default.aspx/TestMethod',
data: function(params){
var query={
message:params.term
}
return JSON.stringify(query);
},
processResults: function (data) {
var data1 = $.map(data, function (obj) {
obj.id = obj.id || obj.ItemNumber; // replace pk with your identifier
return obj;
});
return {
results: data.items,
};
}
}
});
最佳答案
这是一个正确的代码片段,使用map
函数中的index
作为Select2的id:
var data = [{
"text": "Test item no. 1"
},
{
"text": "Test item no. 2"
},
{
"text": "Test item no. 3"
},
{
"text": "Test item no. 4"
}
];
$('.itemSearch').select2({
ajax: {
type: "POST",
url: '/echo/json/',
data: function(params) {
var query = {
message: params.term,
data: data
}
return {
json: JSON.stringify(query)
}
},
processResults: function(data) {
var data1 = $.map(data.data, function(obj, idx) {
obj.id = obj.id || idx;
return obj;
});
return {
results: data1,
};
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<select id="myselect2" class="itemSearch" data-placeholder="click to load..." style="width:200px">
</select>
这里有一个可用的 fiddle :https://jsfiddle.net/beaver71/7rqg3rck/
附注:
这里的代码片段不起作用,因为有一个 Ajax 调用。
相反,Jsfiddle 使用户能够模拟这些 Ajax 调用,但在示例中,数据被发送(通过 POST)到“/echo/json/”服务,并作为同一 Ajax 请求的结果反射回来。
关于jquery - Select2 使用ajax响应数据生成id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47797831/