select2 选项具有相同的索引 ID
select2 options have same index id
我有一个 select2 select 菜单在工作(来自远程地理字节的状态),但我不能 select 具有相同索引 ID 的选项。例如,如果我搜索 "new" 我会得到一些选项,我可以 select 第一个选项 New Albany, IN。然后,如果我输入 "far",第一个选项是 Far Hills, NJ。当我 select 它时,它显示索引为 1 的印第安纳州奥尔巴尼。
我尝试了加载远程数据的示例,https://select2.github.io/examples.html#data-ajax。它的行为方式不同,所以我想知道我是否错误地解析了我的结果。每次搜索时,它都会带回一个索引从 1 开始的新对象。
$('#input_3_4').select2({
ajax: {
url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US",
dataType: 'json',
quietMillis: 1500,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
for(var i = 0; i < data.length; i++){
data[i] = {id:i+1, text:data[i]};
}
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
console.log(data);
return {
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true,
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 3,
//templateResult: formatRepo, // omitted for brevity, see the source of this page
//templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
var dataIndex = 1; //<<=====HERE
//select2 state selector with geobytes remote data source
$('#input_3_4').select2({
ajax: {
url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US",
dataType: 'json',
quietMillis: 1500,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
for(var i = 0; i < data.length; i++){
data[i] = {id:dataIndex, text:data[i]}; //<<=====HERE
dataIndex++; //<<=====HERE
}
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
console.log(data);
return {
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true,
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 3,
//templateResult: formatRepo, // omitted for brevity, see the source of this page
//templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
我有一个 select2 select 菜单在工作(来自远程地理字节的状态),但我不能 select 具有相同索引 ID 的选项。例如,如果我搜索 "new" 我会得到一些选项,我可以 select 第一个选项 New Albany, IN。然后,如果我输入 "far",第一个选项是 Far Hills, NJ。当我 select 它时,它显示索引为 1 的印第安纳州奥尔巴尼。
我尝试了加载远程数据的示例,https://select2.github.io/examples.html#data-ajax。它的行为方式不同,所以我想知道我是否错误地解析了我的结果。每次搜索时,它都会带回一个索引从 1 开始的新对象。
$('#input_3_4').select2({
ajax: {
url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US",
dataType: 'json',
quietMillis: 1500,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
for(var i = 0; i < data.length; i++){
data[i] = {id:i+1, text:data[i]};
}
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
console.log(data);
return {
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true,
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 3,
//templateResult: formatRepo, // omitted for brevity, see the source of this page
//templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
var dataIndex = 1; //<<=====HERE
//select2 state selector with geobytes remote data source
$('#input_3_4').select2({
ajax: {
url: "http://gd.geobytes.com/AutoCompleteCity?callback=?&template=%3Cgeobytes%20city%3E,%20%3Cgeobytes%20code%3E&filter=US",
dataType: 'json',
quietMillis: 1500,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
for(var i = 0; i < data.length; i++){
data[i] = {id:dataIndex, text:data[i]}; //<<=====HERE
dataIndex++; //<<=====HERE
}
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
console.log(data);
return {
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true,
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 3,
//templateResult: formatRepo, // omitted for brevity, see the source of this page
//templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});