本篇文章分享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();
}

显示效果

版权声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！