自己主动提示是时下一个非常流行的功能，比方说百度、谷歌的搜索输入框都使用到了这么一个功能。
因为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));
}
}