layui-xm-select怎么实现远程搜索-Layui教程-PHP中文网

远程搜索需开启remote并关闭searchable，输入值由后端过滤；接口须接收search参数并返回code=0及含value/name的data数组；需手动添加防抖；clearsearchonselect可清空搜索词但不影响选中项。

layui-xm-select怎么实现远程搜索

远程搜索必须开启 `remote` 且禁用 `searchable` 的默认行为

layui-xm-select 的远程搜索不是“在本地输入、再发请求”，而是把输入值直接传给后端，由后端完成过滤。如果你同时开了 searchable: true 和 remote，会触发两次搜索（一次本地模糊匹配，一次远程），结果错乱或空白。

正确做法是：只开 remote，关掉 searchable，让组件把输入框内容原样交给你的 remote 函数处理：

xmSelect.render({
  el: '#select',
  remote: {
    url: '/api/options',
    // 必须返回 {code: 0, data: [...]}, 否则解析失败
    // 输入值会作为 params.search 自动带上
  },
  searchable: false, // 关键！否则本地搜索会干扰
  // 不要设 data，否则初始化就加载静态数据，覆盖远程逻辑
})

`remote.url` 接口必须接收 `search` 参数并返回标准格式

xm-select 默认把用户输入的关键词拼成 search=xxx 作为 query 参数发起 GET 请求。后端接口必须能接收并响应这个参数，且返回结构严格为：

code === 0 表示成功（非 200 状态码也行，但 code 字段必须存在）
data 是数组，每个元素至少含 value 和 name 字段（name 用于下拉显示）
如果返回空数组 []，下拉列表就为空；返回 null 或字段缺失会报错或无反应

示例请求 URL：/api/options?search=java
示例响应体：

{
  "code": 0,
  "data": [
    {"value": "java-1", "name": "Java 开发工程师"},
    {"value": "java-2", "name": "Java 架构师"}
  ]
}

输入延迟与防抖得自己加在 `remote` 函数里

xm-select 自带的 remote 没有内置防抖，连续输入会频繁发请求。必须手动包装一层防抖逻辑，否则容易触发后端限流或卡 UI：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

用 layui.util.debounce（Layui 2.8+ 自带）或自己写个简单定时器
把原始 url 替换为自定义函数，在函数内做防抖 + 请求
注意：函数必须返回 Promise，且 resolve 的数据结构和上面一致

简版防抖示例：

const searchFn = layui.util.debounce(function(val) {
  return new Promise((resolve) => {
    if (!val.trim()) return resolve({code: 0, data: []});
    axios.get('/api/options', {params: {search: val}})
      .then(res => resolve(res.data))
      .catch(() => resolve({code: 0, data: []}));
  });
}, 300);

xmSelect.render({
  el: '#select',
  remote: searchFn,
  searchable: false
})