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

显示效果

相关推荐
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust8 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
全宝9 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele9 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮9 小时前
【无标题】
开发语言·前端·javascript
fie88899 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式