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

显示效果

相关推荐
雾恋12 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊12 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A13 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理13 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
郑板桥3014 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
小*-^-*九14 小时前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
解道Jdon15 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
gnip15 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty16 小时前
基于hiprint的票据定位打印系统开发实践
javascript
百思可瑞教育17 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育