轉載：http://www.bkjia.com/webzh/888271.html
自動提示是時下一個很流行的功能，比如說百度、谷歌的搜索輸入框都使用到了這么一個功能。
由於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;
}
}
});