實現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