Layui select异步加载后搜索失效的主因是未添加lay-search属性和未调用form.render('select')。需在select标签显式添加lay-search，并在AJAX填充option后立即执行form.render('select', 'filter')。

select 异步加载后搜索失效的常见原因 Layui 的 select 默认不支持原生搜索，即使你用 AJAX 填充了 option，只要没手动启用搜索功能，下拉框里就搜不到内容。这不是数据没加载成功，而是 Layui 的渲染逻辑决定的：它把 select 转成了带 DOM 结构的模拟下拉（layui-form-select），但默认不挂载搜索输入框。

• 没调用 form.render('select')，新插入的 option 不会被重新解析
• 启用了搜索但没加 lay-search 属性，DOM 上根本没生成搜索框
• 异步加载完直接操作原生 select，却忘了触发 Layui 的重新渲染

必须加 lay-search 才能触发搜索 UI Layui 的搜索能力完全依赖 lay-search 这个属性，不是 JS 控制开关，是 HTML 层级的“准入许可”。只写 JS 是没用的。

• 在 select 标签上显式加上 lay-search 属性：

  <select name="city" lay-search></select>

• 如果是动态插入的 select（比如通过 JS 创建），得在插入 DOM 后、调用 form.render() 前补上这个属性
• lay-search 不接受值，写成 lay-search="true" 或 lay-search="" 都行，但不能省略

异步加载后要 render 两次？不，一次就够了 很多人以为“先填 option → render → 再搜”，结果发现搜索还是没反应——其实是漏掉了关键时机。

• 数据返回后，先拼好 option 字符串或用 append() 插入到 select 中
• 然后立刻调用 form.render('select', 'your-filter')（第二个参数是 form 容器的 lay-filter 值）
• 不需要额外初始化搜索逻辑，lay-search + render 就够了
• 注意：如果用了 form.render() 无参调用，会重绘整个表单，可能影响其他控件状态

搜索时匹配不到新数据？检查 option 的 text 内容是否被转义 异步加载的数据如果含中文或特殊字符，又经过了 JSON.parse 或 innerHTML 插入，容易被双重编码，导致搜索时字符串不匹配。

• 检查浏览器 Elements 面板里，option 标签内的文本是不是显示为 中国 这类实体，而不是“中国”
• 推荐用 textContent 或 jQuery 的 .text() 设置选项文字，避免 HTML 解析干扰
• Layui 搜索匹配的是 option 的可见文本（innerText），不是 value，所以 value="1" 但 text="北京" 时，搜“北京”才有效

事情说清了就结束。最常卡住的地方就两个：忘了加 lay-search 属性，以及加载完没调 form.render()。其他都是细节微调。

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

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

下载