用到easyui-combogrid，數據比較少的情況，可以一頁就顯示完畢，然后直接下拉選擇。但是對於數據量比較大的情況，一頁顯示全部顯然不合適，好在從easyui-combogrid的數據加載方式可以知道，下拉表格繼承自easyui-datagrid，屬性和方法也繼承自easyui-datagrid，那么當然可以利用表格的分頁屬性:
$('#textYear').combogrid({
panelWidth: 500,
idField: 'num',
textField: 'id',
url:'getTextYear.do',
method: 'post',
queryParams:{cond_value:''},
mode: 'local',
columns: [[
{field:'num',title:'value',width:80},
{field:'id',title:'note',width:180,align:'left'}
]],
fitColumns: true,
pagination:true,
pageSize:10
});
分頁屬性設置為true，前台自動顯示分頁欄，頁面數據條數設為10條。
這樣對數據量大的就可以分頁了。
但是讓用戶一頁一頁的去翻頁從而找到自己需要的數據顯然更不合理，如果數據有幾萬條，所以分頁控件只解決了數據顯示的問題，並沒有解決數據數據匹配的問題。
查看官方文檔，easyui-combogrid提供了一個filter方法，用來匹配用戶當前輸入字符與下拉選項的值，測試后發現，filter只適用於當前頁！並且在測試中還發現，easyui-combogrid當前頁默認最多顯示18條數據，官網的demo是18條數據，但是有翻頁數據的情況下就失效了。但是官方又沒有提供額外的方法，只能另外寫了。
好在功夫不負有心人，還真的在網上找到了一個網友寫的匹配查詢方法
要匹配用戶輸入的字符和下拉表格的數據，就需要獲得用戶輸入時的鍵盤事件或者鼠標事件，然后傳遞輸入的字符作為參數，去進行查詢，查詢的方式和數據表格的查詢是一樣的，所以困難在於捕獲用戶當前輸入。
/*********下拉數據表格匹配查詢 *******/
setTimeout(function () {
var cond_value;
var old = '';
var search = true;
var query = [];
var $grid = $('#textYear');
$grid.combo('options').onChange = function (_new, _old) {
if (_new != old) {
old = _new;
query = [old];
setTimeout(function () {
if (query.length > 0 && search) {
var param = query.pop();
query = [];
if (param != '') {
$grid.combogrid('grid').datagrid('load', {cond_value: param});
}
loading = false;
}
}, 500);
}
};
$grid.combogrid('grid').datagrid('options').onSelect = function(){
return false;
};
$grid.combogrid('grid').datagrid('options').onClickRow = function(index, row) {
search = false;
$grid.combo('hidePanel');
$grid.combo('setValue', row.id);
$grid.combo('setText', row.num);
setTimeout(function () {
search = true;
}, 1000);
}
}, 1000);
設置一個合適的延遲時間，因為用戶輸入是有時間的，一般輸入中文耗時比輸入英文字符耗時要長，所以稍微設置長一點。然后聲明一個查詢參數數組query，參數變量名cond_value,當檢測到當前combogrid的選項options有更改時，即用戶有輸入時，調用combo的onChange方法，這個方法有兩個參數，一個設為新值，一個設為舊值，當新值不等於舊值，就把新值賦給查詢參數。然后下拉數據表格根據這個參數去重新加載數據。
由於每輸入一個字符，數據表格就會根據這個字符去做一次查詢並加載數據，當用戶輸入字符較多時，查詢和加載會進行很多次，原因是我們沒法判斷用戶什么時候輸入完畢，這樣會帶來性能的損耗，所以一開始設置一個合理的延時是非常有必要的。
匹配查詢方法非原創，請支持原創作者！