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

Posted 2020-09-28 wzzkaifa

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

因为easyUI的combobox设计师已经考虑到了这个功能。所以仅仅需简单几步我们能够轻松打造自己的自己主动提示组件。

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

local的意思也就是说先将全部的数据都载入到client页面，之后不过在这些已载入的数据中去过滤，不会向server发出额外的请求

而remote呢，也就是说事先并不载入全部数据。而是等到用户输入keyword之后，再向server发出请求，返回结果

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

而remote适用于数据量大的情况，由于须要查询的数据往往是特点的某一些，载入出全部数据就显得非常浪费了。所以当有keyword了再去查询，得到的数据量较小，从而得到更快的响应时间。

只是还须要在后台写一个查询数据的方法。

先来演示一下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就是我们输出的keyword。而row就代表本地数据中的一行数据

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

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

以下给出一个easyUI的local模式的配置供參考：

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

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

remote这样的方式事实上是没有载入数据这一步的。数据都在数据库里，仅仅须要过滤数据这一步取出我们感兴趣的数据就可以。

因为载入的数据是依据keyword来的。所以必须通过url到server上获取，那么首先须要在server上提供一个这个方案。

相信这个方案应该难不倒大家。仅仅须要获取到client发送的參数拿到数据库中模糊查询一下就能够了。

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

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

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

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

1、combobox提供了一个onBeforeLoad的事件扩展点。是当去server请求数据之前触发的。return false则能够阻止请求的发起。

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

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

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

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

$('#cc').combobox({
	prompt:'输入keyword后自己主动搜索',
	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));
		}
	}