layui后台管理系统搜索功能怎么配置-Layui教程-PHP中文网

layui搜索功能分表单select下拉搜索和表格条件筛选两类，实现逻辑、依赖条件及失效点均不同；form.select需满足嵌套于layui-form、版本≥2.9.16、动态插入后调用form.render；table搜索须手动reload并传where参数，且注意页码重置与字段名匹配。

layui后台管理系统搜索功能怎么配置

layui后台管理系统的搜索功能不是“配个属性就生效”的开关，它分两类场景：表单里的 select 下拉搜索，和表格（table）的条件筛选。两者实现逻辑、依赖条件、常见失效点完全不同，混用或错配就会白忙活。

原生 lay-search 看似简单，但实际运行中 80% 的“没反应”都卡在这三处：

<select></select> 必须嵌套在 <form class="layui-form"></form> 内，不能只是 <div class="layui-form"> 或裸写 <li>Layui 版本必须 ≥ 2.9.16；旧版（如 2.8.x）写 <code>lay-search="{fuzzy: true}" 会静默失效，只当空字符串处理
动态插入的 select，必须在插入后显式调用 form.render('select')，否则 lay-search 属性压根不解析

配置写法也得按版本来：
2.9.16+ 推荐用对象：lay-search="{fuzzy: true, caseSensitive: false}"；
低版本只能用布尔值：lay-search 或 lay-search=""。

layui 表格没有内置“搜索框联动”，所谓搜索，本质是手动触发 table.reload() 并传入 where 参数。很多人卡在“点了按钮没刷新”，其实根本没绑定事件。

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

下载

搜索框（<input id="keyword">）要自己写，不能指望表格组件自动渲染一个出来
必须用 layui.table.reload('yourTableId', { where: { keyword: val } })，其中 'yourTableId' 是 table.render() 时指定的 id 值，写错就刷错表甚至报 Cannot read property 'config' of undefined
where 里的字段名必须和后端接口约定一致，比如后端接收 title_like，就不能只传 {keyword: val}
每次 reload 都要显式加 page: { curr: 1 }，否则页码不变，搜完可能直接跳到空的末页

原生 lay-search 只过滤，不创建。所谓“输入即新增”，需要监听输入框失焦并手动操作：

不能给 select 绑 blur，因为渲染后真实 select 已被隐藏，表层是 <div class="layui-input"> <li>正确做法是 <code>$('body').on('blur', '.layui-input', ...)，再用 $(e.currentTarget).closest('.layui-form-select').prev('select') 找到原始元素
追加前必须去重：$(select).find('option').filter(function(){ return $(this).text().trim() === inputValue })，否则重复点击会堆叠相同项
新增完必须再调一次 form.render('select')，否则新 option 不显示在下拉列表里

原生搜索纯前端过滤，选项超 500 条就开始卡顿，且无法对接后端 API。这时候有两个务实选择：

用官方生态插件 formSelects：支持 data(id, 'server', { url: '/api/options', keyword: 'name' })，自带防抖、加载态、参数拼接，比手写稳得多
自己实现远程搜索：监听 input 的 oninput，用 setTimeout 防抖（建议 300ms），fetch 后把返回数组（每项含 name 和 value）重新 render 到 select；注意此时必须禁用原生 lay-search，否则本地过滤和远程结果冲突