Easyui - 一个比较复杂的ComboGrid（数据表格下拉框）单选的例子

由于某种情况下，使用ComboGrid的时候比较多，为了方便以后使用的时候方便查找，在这里记录一下。

适用场景：单项选择，自动完成，看下面的效果图。

先看一个效果图：

这里输入助记码的时候就显示出窗口了。

然后鼠标点击选择一个：

这个同时更新了多个输入框的值，并且没有使用默认的选择事件。  

前端代码：

<th>
    收费项目名称[<span class="format_required">*</span>]：
</th>
<td>
    <script type="text/javascript">
        $(function () {
            setTimeout(function () {
                var old = '';
                var search = true;
                var query = [];
                var $grid = $('#kc22_akc223');
                $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', {zjm: 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.aka061);
                    $grid.combo('setText', row.aka061);
                    setTimeout(function () {
                        search = true;
                    }, 1000);
                }
            }, 1000);
        });
    </script>
    <select id="kc22_akc223" class="easyui-combogrid" name="akc223" style="width:175px;"
            data-options="
                panelWidth:450,
                idField:'aka060',
                fitColumns:true,singleSelect:true,
                textField:'aka061',
                url:'his/inputInfo/md01.html',
                method:'get',
                queryParams:{zjm:''},
                columns:[[
                    {field:'aka060',title:'药品(项目)编码',width:80},
                    {field:'aka061',title:'药品(项目)名称',width:120},
                    {field:'aka063',title:'收费类别',width:40},
                    {field:'aka066',title:'助记码',width:80},
                    {field:'aka065',title:'收费项目等级',hidden:true},
                    {field:'aka067',title:'药片/诊疗项目',hidden:true}
                ]]
            "></select>
</td>      

后端代码：

/**
 * 助记码查询，只返回前100个结果
 */
@RequestMapping(value = "/md01",method = RequestMethod.GET)
public @ResponseBody List<Md01> md01(@RequestParam("zjm") String zjm) throws Exception {
    if (zjm.equals("")) {
        return new ArrayList<Md01>(0);
    }
    return inputService.selectMd01ByZjm(zjm.toUpperCase());
}