layui下拉框对接后台API接口数据教程-Layui教程-PHP中文网

启用 lay-search 远程搜索必须使用 json 字符串配置对象，如 lay-search="{ remote: true, url: '/api/options' }"，否则仅触发前端模糊匹配；tableselect 要求后端返回含 data 数组的 json 且接收 page、limit、keyword 参数；formselects 需通过 success 回调将后端字段映射为 {name, value} 结构。

layui下拉框对接后台api接口数据教程

lay-search="{ remote: true, url: '/api/options' }" 必须带配置对象才触发请求

默认的 lay-search 是纯前端过滤，不会发任何网络请求。很多人写了 lay-search 或 lay-search="" 后发现输入没反应，就是卡在这儿。

要启用远程搜索，必须用 layui 2.9.16+ 的写法，且是 JSON 字符串格式的配置对象：

lay-search="{ remote: true, url: '/api/options' }" —— 正确，会自动在输入时发 GET 请求，携带 q=xxx 参数
lay-search="true" 或 lay-search —— 错误，只做 DOM 级别模糊匹配，不走后端
URL 必须可被浏览器直接访问（如 /api/options?q=北京），不能是相对路径未解析的模板变量
后端返回必须是标准 Layui 表格/下拉框兼容格式：{code: 0, msg: "", data: [{value: "1", title: "北京"}, ...]}

tableSelect 渲染失败？检查 URL 返回结构和分页参数

tableSelect 不是 Layui 官方组件，它依赖后端返回固定结构的分页数据，且对字段名敏感。常见报错是“data is undefined”或列表空白。

它默认发送的请求是：/api/pianqu?page=1&limit=10&q=xxx，其中 q 是搜索关键词（由 searchKey: 'keyword' 控制）。

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

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

下载

后端必须接收 page、limit、keyword（或你配的 searchKey）三个参数
返回 JSON 中必须有 data 字段，且是数组；count 字段用于分页总数（非必需但推荐）
如果后端用 Spring Boot，注意 @RequestParam String keyword 不能为 null，需设默认值或判空
不要返回 result 或 list 包裹层，tableSelect 不识别，会静默失败

formSelects 动态加载失败？别漏掉 success 回调的数据转换

formSelects 的 url 配置看似简单，但实际返回的数据结构往往和插件期望的不一致，导致选项不显示。

它期望每个选项是 {name: "...", value: "..."} 对象，而多数后端接口返回的是 {id: 1, label: "杭州", code: "HZ"} 这类结构。

必须用 success 回调手动映射字段：

success: function(res) {
  return res.data.map(item => ({
    name: item.label || item.name,
    value: item.id || item.value
  }));
}

如果后端返回的是扁平数组（如 ["北京","上海"]），也要转成对象数组，否则插件不认
多选场景下，value 必须是字符串或数字，不能是对象，否则提交表单时会序列化异常
首次渲染前确保 select 元素已存在 DOM 中，且 id 与 formSelects.config('xxx', ...) 中的 key 一致

input + select 叠加方案里，autocomplete="off" 和 z-index 是硬性要求

手写叠加方案（input 覆盖 select）最容易出视觉和交互 bug，两个属性不设准，用户根本点不到下拉箭头或输不了字。

autocomplete="off" 必须加在 input 上，否则 Chrome 会自动填充历史记录，遮挡 select 下拉项
z-index: 2 给 input，z-index: 1 给 select 容器，否则点击箭头无效
width 要留出右侧约 24px 空间，不然盖住原生下拉小三角，失去点击展开能力
监听 input 的 input 事件（不是 keyup），避免中文输入法未上屏就触发过滤
选中后要用 select 的 change 事件同步值到 input，并调用 form.render('select') 保证验证逻辑生效

真实项目里最常被忽略的，是后端返回字段名和前端插件约定之间的“翻译层”。没人会告诉你 tableSelect 只认 data，formSelects 只吃 {name,value}，而 lay-search 的 remote 模式连空格都不允许出现在配置字符串里——这些细节不踩一遍，光看文档永远调不通。