jquery中combobox多选模糊过滤完美版

夏侯宏旷
2023-12-01

之前尝试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);
});





 类似资料: