easyui 筛选数据及仅允许选择数据

先说需求，本地已缓存数据源，用户输入拼音码或编号，筛选数据作为新的数据源，然后通过键盘选择。

再说问题，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事件。直接上代码。

就是这样咯，这个控件捉急！！！！！！！！！！

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

　　

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');
    });
}