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

顯示效果