最近项目中页面模板用到select2,需要动态搜索数据,显示下拉选,参考select2官网,大概写出来,代码如下
$("#select2-button-addons-single-input-group-sm").select2({
width: "off",
placeholder: {id:"-1", text:"请输入域账户"},
ajax: {
url: appRoot+"/getLdapUser.do",
dataType: 'json',
delay: 250,
data: function(params) {
return {
userName: params.term, // search term
page: params.page
};
},
processResults: function(data) {
// 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
var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
var arr = data
for(item in arr){
itemList.push({id: item, text: arr[item]})
}
return {
results: itemList
};
},
cache: false
},
escapeMarkup: function(markup) {
return markup;
},// let our custom formatter work
minimumInputLength: 1,
templateResult: formatTask,
templateSelection: formatTaskSelection
});
其中两个参数:
templateResult: formatTask,
templateSelection: formatTaskSelection
对应的两个方法要重写
function formatTask(userName) {
if (userName.loading) return userName.text;
var markup = "<div class='select2-result-user clearfix'>" +userName.text + "</div>";
return markup;
}
function formatTaskSelection(userName) {
return userName.text;
}
这样写遇到问题:
在选择选项时总是选中一个选项,但是显示的是错误的选项,比如:我当前选中“北京”,下拉选第一个是“上海”,我选择上海,还是显示“北京”,搞了两天,最终找到问题所在,问题代码是如下几行:
var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
var arr = data
for(item in arr){
itemList.push({id: item, text: arr[item]})
}
因为select2判断选中必须要求数据格式为{id:0,text:'ANTS'}这样,通过id来判断选中项,如上面代码,第一次搜索,选中“北京”,遍历创建新格式的时候,“北京”对应id为0,那么id为0的选项为选中项,也就是“北京”。当我不刷新页面重新搜索“上海”的时候,又进行遍历创建新格式,这时候“上海”对应id也为0,这时候select2就认为id为0的选项是选中项,这时候虽然select显示北京,但是实际选中项为上海。
解决:
设置全局i,每次遍历设置id为i,再进行i++操作,这样id就不会重复,不会出现上面问题;
var i = 0;
$("#select2-button-addons-single-input-group-sm").select2({
width: "off",
placeholder: {id:"-1", text:"请输入域账户"},
ajax: {
url: appRoot+"/getLdapUser.do",
dataType: 'json',
delay: 250,
data: function(params) {
return {
userName: params.term, // search term
page: params.page
};
},
processResults: function(data) {
// 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
var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
var arr = data
for(item in arr){
itemList.push({id: i, text: arr[item]})
i++;
}
return {
results: itemList
};
},
cache: false
},
escapeMarkup: function(markup) {
return markup;
},// let our custom formatter work
minimumInputLength: 1,
templateResult: formatTask,
templateSelection: formatTaskSelection
});
补充:
经测试,上面创建新格式,其中的id可以随意,不一定为数字,只要不是重复的就好,而且id是有其他用处的,如果提交表单,id值就是提交的select中option的value值,大家视自己情况修改id。