先说需求，本地已缓存数据源，用户输入拼音码或编号，筛选数据作为新的数据源，然后通过键盘选择。
再说问题，easyui combogrid控件，在mode为local，也就是将数据源缓存在本地的情况下,一般情况下，是通过
filter:function(q,row){
var opts=$(this).options;
return row[opts.textField].indexOf(q)>-1;
}
官网api也有介绍，但是在实际项目中有两个问题：
尝试使用了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‘);
});
}
原文：http://www.cnblogs.com/thinkxzx/p/4564760.html