layui下拉框xm-select自定义搜索使用方法
xm-select介绍始于Layui, 下拉选择框的多选解决方案
git地址：https://gitee.com/maplemei/xm-select
文档说明：https://codecp.tech/static/xm-select/#/component/options
什么情况下使用
[*]下拉框的数据量比较大
[*]需要支持下拉框的搜索
如何使用自定义搜索
[*]引用xm-select,使用最新版本，老版本update方法无法使用
[*]定义下拉框的位置
[*]调用reader进行渲染
let list = [];let pageSize = 10；if(demoSelect == null){orgNameSelect = xmSelect.render({ el: '#demoSelect', data: [], // 数据 paging: true, // 是否分页 pageSize: pageSize, // 每页数量 max:10, // 最多可以选的个数 // 触发监听 on: function(data){ // 监听到的数据类型包含 name，value let arr = data.arr; let checkIdArr = []; let checkNameArr = []; if(arr.length > 0){ arr.forEach((item) => { checkIdArr.push(item.value); checkNameArr.push(item.name); }); $("#id").val(checkIdArr.join(",")); $("#name").val(checkNameArr.join(",")); }else{ $("#id").val(""); $("#name").val(""); } }, // 样式 theme: { color: '#4991E1', }, // radio: true,// 单选 // clickClose: true,// 选中后关闭 pageRemote: true,// 是否开启远程分页 pageEmptyShow: false,// 显示空页 remoteSearch: true,// 远程搜索 // 远程搜索方法 // val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码 // show: 下拉框显示状态, pageIndex: 分页下当前页码 remoteMethod: function(val, cb, show, pageIndex){ // 调用后台接口 $.ajax({ url: "/getList?param=111, type: "GET", dataType: "JSON", success: function(resp) { if (resp.code === SUCCESS_CODE) { if(resp.data.total > 0){ let data = resp.data.list; list = []; for(let i=0; i
页:
[1]