使easyui中combobox控件支持本地数据自动补全

easyui的combobox确实给我们实现自动补全功能带来了便利,但是有时候我们为了减少服务器压力,会将一些不常更改的数据缓存到前端,例如使用cookie和html5的storage进行缓存.

那么如何使用combobox实现对缓存数据进行提示呢?直接上代码:

	filter:function(q, row){//当输入数据时会调用该方法进行筛选过滤,支持键值同时搜索
		var opts = $(this).combobox('options');
		return row[opts.valueField].indexOf(q) == 0||row[opts.textField].indexOf(q) ==0;
	},
	onClickIcon:function(){//使用户点击combobox下拉按钮时也能执行过滤
		var q=$(this).combobox("getValue");
		$(this).combobox("options").keyHandler.query.call(this,q);
		$(this).combobox("validate");
	}

通过easyui的filter属性过滤好数据,为了使用户点击下拉框时亦能有效,那么为点击图标按钮也添加一个事件即可,

当用户输入错误的值后导致数据不能通过验证时的处理方法请参考: 

  easyui中combobox 验证输入的值必须为选项框中的数据

当下拉框数据量大的时候会导致效率大大降低,那么此时我们可以限定每次提示的数据量以提升效率,请参考: 

  使easyui中combobox限制显示的数量以提升效率(修改源码)