combobox的输入内容匹配的源码分析--修改为真正的模糊匹配

jhonrain1321

于 2015-09-24 08:04:49 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： easyui 文章标签：源码 easyui

本文链接：https://blog.csdn.net/Before_Morning/article/details/48706157

本文介绍了如何改造EasyUI ComboBox的源码以实现真正的模糊匹配功能。针对项目需求，原有的ComboBox仅支持从第一个字母开始匹配，作者通过调试和修改`doQuery()`及`filter()`方法，实现了更灵活的模糊查询效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，项目中有个需求就是系统中的所有的单选下拉框由于加载的数据比较多，所以产品设计提议要将所有的下拉框改造成可以实现模糊匹配的形式。之前使用过easyui的combox插件，但是它只支持从第一个字母开始匹配，所以这个还是不能满足需求，所以就有了一种改造源码的想法。

其实，经过调试代码发现还是不算太难，下面就将源码修改部分贴出来

首先要修改模糊查询后的结果处理方法--jquery.combobox.js 中的doQuery()方法

修改前的源码

function doQuery(target, q){
		var state = $.data(target, 'combobox');
		var opts = state.options;
		
		if (opts.multiple && !q){
			setValues(target, [], true);
		} else {
			setValues(target, [q], true);
		}
		
		if (opts.mode == 'remote'){
			request(target, null, {q:q}, true);
		} else {
			var panel = $(target).combo('panel');
			panel.find('div.combobox-item-selected,div.combobox-item-hover').removeClass('combobox-item-selected combobox-item-hover');
			panel.find('div.combobox-item,div.