1. 程式人生 > >jquery中combobox多選模糊過濾完美版

jquery中combobox多選模糊過濾完美版

之前嘗試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);
});