layui下拉框xm-select自定义搜索使用方法

xm-select介绍

始于Layui, 下拉选择框的多选解决方案

git地址：https://gitee.com/maplemei/xm-select

文档说明：https://codecp.tech/static/xm-select/#/component/options

什么情况下使用

• 下拉框的数据量比较大
• 需要支持下拉框的搜索

如何使用自定义搜索

• 引用xm-select,使用最新版本，老版本update方法无法使用
  <script type="text/javascript" th:src="@{/res/js/xm-select-1.2.2.js}"></script>

• 定义下拉框的位置
  <div id="demo1"></div>

• 调用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<data.length; i++){
  list.push({"name":data[i].orgName,"value":data[i].orgId});
  }
  // 页码
  let pages = Math.ceil(resp.data.total / pageSize);
  cb(list,pages);
  }else{
  // 初始化为空
  cb([],0);
  }
  }
  }
  });
  },
  // 开启搜索
  filterable: true,
  });
  }else{
  console.log("更新");
  // reset 会把已选中的数据清除 update方法只是更新，他们都可以重新触发一次remoteMethod
  orgNameSelect.reset();
  }

显示效果