利用easyUI的combobox打造自動搜尋提示功能
自動提示是時下一個很流行的功能，比如說百度、谷歌的搜尋輸入框都使用到了這麼一個功能。
由於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;
}
}
});