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

显示效果

相关推荐
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
安心不心安10 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202010 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子10 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js