easyui 提示框组件_使用easyUI的combobox下拉框控件实现输入提示功能（google suggest）...

但是在最近用的项目上，可能是使用了easyUI的缘故，一些样式没法正常的添加上去。正在烦恼的时候，发现easyUI自带的combobox比标签强大很多。easyUI的combobox控件详细的功能大家可以去easyUI中文网(http://www.jeasyui.com/documentation/combobox.php)，这里就不再重复介绍了。

效果预览：

功能说明：

当用户在输入框输入内容的时候，下拉框能够动态的将用户输入的内容，传回给后台，后台在数据库中查询产品表的产品名称字段，通过模糊查询如果有匹配结果，那么将结果放在前台的下拉框中，提供给用户选择。

关键代码：

【前台】

这里是使用easyUI的combobox代码生成下拉框，这里没有通过使用combobox的onChange()或者onSelect函数来触发ajax向后台发送数据，之前也想过这两种方法，但是感觉问题多多啊，于是就放弃了，使用loader方法去触发ajax异步请求，并且loader也有对应的方法，能向下拉框中添加后台返回的数据。最后补充一下，textField : 'product_name'，因为我这里需要显示从后台传回数据的product_name的这个字段。

下面开始loader函数(关键)

var btsloader = function (param, success, error) {

var q = param.q || "";

if (q.length <= 0) {

console.log("q.length <= 0");

return false;

}

$.ajax({

url: "${pageContext.request.contextPath}/product_listByKeywords.action",

type: "post",

data: {param: q},//后台使用param这个变量接收传值的，后台用了struts、spring后面就不拓展说明了

dataType: "json",

success: function (data) {

//console.log("i am in success-->" + data);返回的是数组对象data

var items = $.each(data, function(value){

return value; //遍历数组中的值

});

success(items);//调用loader的success方法，将items添加到下拉框中,这里是难点啊，之前后台已经返回数据了，但就是不添加到下拉框

}

});

}这里就是loader对应的函数了，首先判断用户是否在combobox上输入了内容，如果没有输入内容，则不发送ajax请求。其中$.each()这个方法非常重要，因为返回的是一个对象数组，如果不将其中的value值遍历出来的话，是没有办法将数据添加到下拉框中的，之前做的时候，卡在这里很久啊，不知道用什么方法遍历，估计forEach也应该可以具体的没试过。

【后台】

product_listByKewords.action对应的处理函数，这里懒得写struts对应的处理结果了，直接返回NONE。

public String listByKeywords() throws Exception {

System.out.println("param-->" + param);

List pList = new ArrayList();

pList = productService.findProductByKeywords(param);//前台传回来用户输入的值，调用findProductByKewords(String param)方法去后台查询结果

System.out.println("pList size -->" + pList.size());//检查一下List长度，调试的时候方便看

// 转换为json

JSONSerializer jsonSerializer = new JSONSerializer();

jsonSerializer.exclude("*.class");

String result = jsonSerializer.serialize(pList);

System.out.println("result in listByKeywords-->" + result);//将查询到的结果打印一下。打印结果就在下面

// 写回客户端

ServletActionContext.getResponse().setContentType(

"text/json;charset=utf-8");

ServletActionContext.getResponse().getWriter().write(result);

return NONE;

}

打印结果，也就是返回给前台的数据。这也就是为什么前台需要做一次遍历的原因，不然没法获取到对应的值。

result in listByKeywords-->[{"id":28,"product_barCode":"","product_desc":"34","product_firstlevel":{"class_name":"食品/保健","id":17},"product_name":"大米325","product_num":"mi325","product_photo":"","product_salesPrice":3423.00,"product_seclevel":{"class_name":"菜市场","id":113,"parent_id":"17"},"product_standard":"432","product_thirdlevel":{"class_name":"五谷杂粮","id":1406,"parent_id":113},"product_time":null,"product_type":"43","product_unit":"44323","storage_num":"321","supplier_num":"321"},{"id":29,"product_barCode":"55435345","product_desc":"5345","product_firstlevel":{"class_name":"食品/保健","id":17},"product_name":"大米326","product_num":"mi326","product_photo":"","product_salesPrice":4234.00,"product_seclevel":{"class_name":"菜市场","id":113,"parent_id":"17"},"product_standard":"123","product_thirdlevel":{"class_name":"五谷杂粮","id":1406,"parent_id":113},"product_time":null,"product_type":"123","product_unit":"123","storage_num":"123","supplier_num":"321"}]

大概内容就是这些吧，有什么问题欢迎互动交流，谢谢大家！

最后提前祝福大家新年快乐，羊年大吉！程序不出BUG！