利用easyUI的combobox打造自动提示组件

逃离我推掉我的手 2022-08-12 21:30 236阅读 0赞

自动提示是时下一个很流行的功能，比如说百度、谷歌的搜索输入框都使用到了这么一个功能。

由于easyUI的combobox设计师已经考虑到了这个功能，所以只需简单几步我们可以轻松打造自己的自动提示组件。

自动提示有两种模式，一种是本地（local）一种是远程的（remote）。

local的意思也就是说先将所有的数据都加载到客户端页面，之后仅仅是在这些已加载的数据中去过滤，不会向服务器发出额外的请求

而remote呢，也就是说事先并不加载所有数据，而是等到用户输入关键字之后，再向服务器发出请求，返回结果

这两种模式的适用场景也比较明显，local方式比较适用于数据量小的情况，加载所有数据快，且用起来方便，无需再在后台添加搜索方法；

而remote适用于数据量大的情况，因为需要查询的数据往往是特点的某一些，加载出所有数据就显得很浪费了。所以当有关键字了再去查询，得到的数据量较小，从而得到更快的响应时间。不过还需要在后台写一个查询数据的方法。

先来演示一下local的方式，分为两步：加载数据、过滤数据

**加载数据：**

通过设置data或是url，这里推荐通过data，因为这样不需要发起额外的请求。

**过滤数据：**

首先需要可以编辑，combobox默认的editable就是true，那么无需额外设置。

并且combobox提供了filter方法帮助我们来过滤本地数据

$('#cc').combobox({
    	filter: function(q, row){
    		var opts = $(this).combobox('options');
    		return row[opts.textField].indexOf(q) == 0;
    	}
    });

这里的q就是我们输出的关键字，而row就代表本地数据中的一行数据

熟悉jQuery的朋友应该很好理解，filter就是过滤出哪些满足测试条件的数据，在这里，测试条件就是row\[opts.textField\].indexOf(q) == 0，也就是说得到以关键字q开头的数据。

到这里，其实在功能上已经实现了自动提示了。若是您觉得组件最右边的选择框下拉箭头不美观，那么可以通过设置hasDownArrow:false将其去掉。

下面给出一个easyUI的local模式的配置供参考：

$('#cc').combobox({
    	prompt:'输入关键字后自动搜索',        
    	required:true,        
    	url:'repairs/getEqiupmentList',        
    	editable:true,        
    	hasDownArrow:false
    });

至此local方式就讲完了，下面说一下remote的方式，remote要比local复杂一点，先分析一下

remote这种方式其实是没有加载数据这一步的，数据都在数据库里，只需要过滤数据这一步取出我们感兴趣的数据即可。

由于加载的数据是根据关键字来的，所以必须通过url到服务器上获取，那么首先需要在服务器上提供一个这样的方法。

相信这样的方法应该难不倒大家，只需要获取到客户端发送的参数拿到数据库中模糊查询一下就可以了。

值得注意的是，在remote方式下：

1、每次打开表单页面的时候，总是会先发起一次请求，其中keyWord为空

2、表单保存之后再修改该表单时，会发一次请求，与1的一样，keyWord为空，这样的话，之前填的数据将无法被翻译，只能显示code/id等翻译前的值

针对这两点我说说我的解决方案：

1、combobox提供了一个onBeforeLoad的事件扩展点，是当去服务器请求数据之前触发的，return false则可以阻止请求的发起。

那么我们可以在这里判断keyWord是否为空，从而控制请求是否发起，问题1迎刃而解！

2、我们需要找到在修改表单时有什么“与众不同”之处，那就是虽然keyWord为空，但是实际上combobox中是有值的。这一点就不同于1中的请求。

那么还是利用onBeforeLoad，当keyWord为空，但是combobox的值不为空时，我们就将id发到服务器上，从而得到唯一的一个结果，这样性能上也是极好的吧。

下面给出combobox的设置以及后台部分代码：

$('#cc').combobox({
    	prompt:'输入关键字后自动搜索',
    	required:true,
    	mode:'remote',
    	url:'repairs/getEqiupmentList',
    	editable:true,
    	hasDownArrow:false,
    	onBeforeLoad: function(param){
    		if(param == null || param.q == null || param.q.replace(/ /g, '') == ''){
    			var value = $(this).combobox('getValue');
    			if(value){// 修改的时候才会出现q为空而value不为空
    				param.id = value;
    				return true;
    			}
    			return false;
    		}
    	}
    });

后台search部分代码：

public void getEqiupmentList(SearchDTO searchDTO,<span>	</span>// 这里封装了一个实体SearchDTO（String q，Integer id）
    			HttpServletResponse response) throws IOException {
    		Integer id = searchDTO.getId();
    		String keyWord = searchDTO.getQ();
    		if (id == null && StringUtils.isBlank(keyWord)) { 
    			return;
    		}
    		if (id != null) { // 修改时传入id
    			List<Equipment> equipmentList = new ArrayList<Equipment>(1);<span>	</span>// 这里需要返回一个jsonArray
    			Equipment equipment = basecodeService.getEquipmentById(id);
    			equipmentList.add(equipment);
    			sendJson(response, Utils.parseJson(equipmentList));
    			return;
    		} else {
    			List<Equipment> equipmentList = repairsService
    					.getEquipmentListBySearch(searchDTO.getQ().toString);
    			sendJson(response, Utils.parseJson(equipmentList));
    		}
    	}