这里用的方法是一个不可编辑的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