easyui combogrid解決filter篩選及僅允許下拉列表的解決辦法

先說需求，本地已緩存數據源，用戶輸入拼音碼或編號，篩選數據作為新的數據源，然后通過鍵盤選擇。

再說問題，easyui combogrid控件，在mode為local，也就是將數據源緩存在本地的情況下,一般情況下，是通過

filter:function(q,row){
  var opts=$(this).options;
  return row[opts.textField].indexOf(q)>-1;
}

官網api也有介紹，但是在實際項目中有兩個問題：

1. 數據量較大，每次篩選很慢。
2. 不知道是不是數據原因，在篩選時，並沒有篩選出數據，只是選擇了符合條件的最后一條。

嘗試使用了onChange方法，同樣有問題。在選擇數據行以后(假如text為a)，又觸發了onChange事件。如果對newValue進行判定，遍歷數據源，匹配后，設置新的text等於a，防止觸發onChange事件將text變為空，這樣雖然可以最終選到想要的text，但是這樣的時候，點擊下鍵就選擇，不知道是不是easyui的缺陷，看源代碼無果。同樣無法滿足需求。

最后，采用的解決辦法是keyHandler：

keyHandler: {
    up: function(e) {
        var row=$grid.combogrid('grid').datagrid('getSelected');
        var i=$grid.combogrid('grid').datagrid('getRowIndex', row)||1;
        $grid.combogrid('grid').datagrid('selectRow', (i-1)>=0?(i-1): 0);
    }
    ,
    down:function(e) {
        var row=$grid.combogrid('grid').datagrid('getSelected');
        var data=$grid.combogrid('grid').datagrid('getData');
        length=data.total;
        var i=$grid.combogrid('grid').datagrid('getRowIndex', row);
        if(i===-1) {
            $grid.combogrid('grid').datagrid('selectRow', 0);
        }
        $grid.combogrid('grid').datagrid('selectRow', (i+1)<length?(i+1):length);
    }
    ,
    query: function(q, e) {
        var loadDepts=[];
        var value=q.toString().toUpperCase();
        if(value.length<2) {
            return;
        }
        var reg=/[\u4e00-\u9fa5]+/g;
        if(reg.test(value)) {
            return;
        }
        for(var i=0;
        i<deptData.length;
        i++) {
            if(deptData[i]["dept_code"].indexOf(value)>-1||deptData[i]["input_code"].indexOf(value)>-1) {
                loadDepts.push(deptData[i]);
            }
        }
        $grid.combogrid('grid').datagrid('loadData', loadDepts);
        $grid.combogrid("setText", q);
    }
    ,
    enter:function(e) {
        var row=$grid.combogrid('grid').datagrid('getSelected');
        $grid.combogrid('setValue', row.dept_code);
        $grid.combogrid('hidePanel');
    }
}

filter事件很好的解決了篩選數據成為新的數據源的問題。同時還滿足了全部使用鍵盤操作的需求（這個需求主要是為了滿足用戶的登記速度）。

另一個問題是怎么使得用戶最后輸入的數據合法。顯然editable不能設置為false，因為用戶要篩選，解決辦法，就是運用onHidePanel事件。直接上代碼。

function valiCombo($grid){
	var opts = $grid.combogrid('options');
	var value =$grid.combogrid('getValue');  
	var data=$grid.combogrid('grid').datagrid('getData').rows;
	for(var i=0;i<data.length;i++){
		if(value==data[i][opts.idField]){
			return;
		}
	}
	$.messager.alert("提示",""+$grid.parent().prev()[0].innerHTML+"必須選擇下拉列表的一項","warning",function(){
		$grid.combogrid('showPanel');
	});
}

$(elem).combogrid({
	onHidePanel:function(){
			valiCombo($grid);
		        }
})    

就是這樣咯，這個控件捉急！！！！！！！！！！