jquery中combobox多選模糊過濾完美版
阿新 • • 發佈:2019-02-07
之前嘗試combobox多選的模糊過濾的時候陷入了思維誤區,以為jquery自定義了特殊的過濾方法在本身的js中,而filter方法與其衝突。其實combobox的預設過濾也是基於filter實現的,只是預設的時候是以combobox的文字內容過濾。
下面是一個combobox實現多選的完美示例:
var diseaseList = []; $CommonUI.getComboBox("#diseaseName").combobox({ valueField:'id', textField:'text', data:dataSoruce, multiple:true, required:true, editable:true, filter:function(q,row){ var opts = $(this).combobox('options'); var newTextList = q.split(","); var newText = newTextList[newTextList.length-1]; return row[opts.textField].indexOf(newText) >-1; },onSelect:function(row){ //排除相同選項被多次選擇 for(i in diseaseList){ if(diseaseList[i] == row.id){ $("#diseaseName").combobox("setValues",diseaseList); $("#diseaseName").combobox("loadData",dataSoruce); return; } } diseaseList.push(row.id); $("#diseaseName").combobox("setValues",diseaseList); $("#diseaseName").combobox("loadData",dataSoruce); },onUnselect:function(row){ for(i in diseaseList){ if(diseaseList[i] == row.id){ diseaseList.splice(i,1); } } },onLoadSuccess:function(){ $("#diseaseName").next().children(":text").attr("placeholder","請用英文逗號分隔選項"); } }); //編輯下拉框文字時的操作 $("#diseaseName").next().children(":text").blur(function(){ var newList = $("#diseaseName").combobox("getText").split(","); var newCodeList =[]; for(i in newList){ $.ajax({ type:'post', async:false, dataType:'json', url:$WEB_ROOT_PATH+'/basecode/baseCodeCtrl.htm?BLHMI=findBaseCodeByDiseaseName', data:{'dto.baseCode.codeSystem':diseaseCategory,'dto.baseCode.displayName':newList[i]}, success:function(code){ if(code != null){ newCodeList.push(code); } } }); } diseaseList = newCodeList; $("#diseaseName").combobox("setValues",diseaseList); $("#diseaseName").combobox("loadData",dataSoruce); });