大家好，之前寫過一篇文章也是模拟Google suggest的（http://blog.csdn.net/ghostsk3/article/details/42040669）。
但是在最近用的項目上，可能是使用了easyUI的緣故，一些樣式沒法正常的添加上去。正在煩惱的時候，發現easyUI自帶的combobox比<select></select>标簽強大很多。easyUI的combobox控件詳細的功能大家可以去easyUI中文網（http://www.jeasyui.com/documentation/combobox.php），這裡就不再重複介紹了。
效果預覽：
功能說明：
當使用者在<産品名稱>輸入框輸入内容的時候，下拉框能夠動态的将使用者輸入的内容，傳回給背景，背景在資料庫中查詢産品表的産品名稱字段，通過模糊查詢如果有比對結果，那麼将結果放在前台的下拉框中，提供給使用者選擇。
關鍵代碼：
【前台】
<input class="easyui-combobox" name="product_name" id="product_name" data-options="
valueField:'id' , textField:'product_name', loader : btsloader, mode : 'remote'
"/>
這裡是使用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<Product> pList = new ArrayList<Product>();
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！