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();
    }

显示效果

相关推荐
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy1 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子1 天前
迭代器和生成器
前端·javascript
前端老鹰1 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
芦苇Z1 天前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
源猿人1 天前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin1 天前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖1 天前
极简三分钟ES6 - ES9中for await of
前端·javascript