实现easyui的combogrid模糊查询框

这里用的方法是一个不可编辑的combogrid控件，覆盖上一个可输入的Input控件。

思路：

　　1、初始时取到后台查询出的列表，存储到全局变量

　　2、当输入框输入内容时，循环匹配列表，重新绑定到combogrid

HTML代码

<input id="receiveName" name="receiveName" class="easyui-combogrid" style="width:100%;" />
<input id="tempSearch" class="easy" type="text" style="width:70%;position: absolute;left: 108px;
                        top: 57px;border: none;outline:none" />

<!--显示已勾选记录-->
<textarea id="receiveList" name="receiveList" style="width:100%;height:50px;resize:none;"></textarea>

JS代码

var wireRod;    //定义全局变量存储查询出的列表
var url = "/XXX/XXX/XXX";
$.ajax({
    url: url,
    type: "get",
    dataType: "json",
    success: function (result) {
        wireRod = result;
        //绑定combogrid
        $("#receiveName").combogrid('grid').datagrid('loadData', { rows: wireRod, total: wireRod.length });
    }
});    

//初始化combogrid
$('#receiveName').combogrid({
    multiple: true,
    editable: false,
    idField: 'LoginName',
    textField: 'Name',
    fitColumns: true,
    columns: [[
        { field: 'ck', checkbox: true },
        { field: 'LoginName', title: '登录名', width: 60 },
        { field: 'Name', title: '用户名称', width: 100 },
        { field: 'Description', title: '描述', width: 100 }
    ]],
    onCheck: function (rowIndex, rowData) {
        var list = $("#receiveList").val();
        if (list.indexOf(rowData.LoginName) < 0) {
            //将选中的项赋值到文本框中
            $("#receiveList").val(list + rowData.LoginName + ";");
        }
    }
});

//模糊查询
$("#tempSearch").keyup(function () {
        $('#receiveName').combogrid('showPanel');
        var nowValue = this.value;
        if (nowValue == "") {
            $("#receiveName").combogrid('grid').datagrid('loadData', wireRod);
            return;
        }
        var temprows = [];
        $.each(wireRod, function (i, obj) {
            if (obj.LoginName.indexOf(nowValue) >= 0 || obj.Name.indexOf(nowValue) >= 0)
                temprows.push(obj);
        });
        $("#receiveName").combogrid('grid').datagrid('loadData', { rows: temprows, total: temprows.length });
});

最终效果图：

PS：easyui的combogrid中有个keyHandler属性，也能实现类似功能，不过，效果不怎么理想，具体用法可以参考：https://www.cnblogs.com/gx-java/p/6194330.html