在项目中遇到需求,需要combobox在多选时实现模糊过滤,即是说你输入内容时,combobox自动过滤包含输入值的选项供你选择。
jquery的combobox在单选的时候具有自动过滤功能,但是当设置了multiple:true时,combobox的第一个值可以模糊查询,第二个值则不行了。原因是combobox默认是将输入框的整个值拿去模糊匹配,故而多选时不能模糊过滤。
对此我想了一个折中的办法。当输入文字时清空combobox的文本,这样每次输入就只会匹配输入的内容了,在选中一行的时候将其放入一个数组,设置下拉框的值为该数组并重新加载下拉框数据,使之能显示所有选项。
具体代码如下:
onSelect:function(row){
if(diseaseList.length==0){
diseaseList.push(row.id);
$("#diseaseName").combobox("setValues",diseaseList);
$("#diseaseName").combobox("loadData",dataSoruce);
diseaseText = $("#diseaseName").combobox("getText");
}else{
for(i in diseaseList){
if(diseaseList[i] == row.id){
$("#diseaseName").combobox("setValues",diseaseList);
$("#diseaseName").combobox("loadData",dataSoruce);
diseaseText = $("#diseaseName").combobox("getText");
return;
}
}
diseaseList.push(row.id);
$("#diseaseName").combobox("setValues",diseaseList);
$("#diseaseName").combobox("loadData",dataSoruce);
diseaseText = $("#diseaseName").combobox("getText");
}
},onUnselect:function(row){
for(i in diseaseList){
if(diseaseList[i] == row.id){
diseaseList.splice(i,1);
diseaseText = $("#diseaseName").combobox("getText");
}
}
}
});
$("#diseaseName").next().children(":text").focus(function(){
$("#diseaseName").combobox("setText","");
});
$("#diseaseName").next().children(":text").blur(function(){
$("#diseaseName").combobox("setText",diseaseText);
});
注意:对于combobox进行onfocus事件和onblur事件的绑定并不是直接作用在下拉框对象上,而是
$("#diseaseName").next().children(":text")对象