Layui下拉框select如何实现搜索功能-Layui教程-PHP中文网

layui 2.8+ 才原生支持 lay-search，仅限本地模糊匹配；旧版不支持，需手动插件或重写；对大数据量、html 内容、远程加载等场景均无效。

layui select 默认不支持搜索，必须手动加插件或改写

原生 layui.select 渲染的下拉框没有内置搜索逻辑，直接调用 layui.form.render('select') 或设置 lay-search 属性（旧版文档误导）都无效。layui 2.8+ 才在 select 中正式支持 lay-search，但仅限于「启用本地模糊匹配」，且对数据量大、含 html 内容、远程加载等场景完全无能为力。

旧版 Layui（lay-search，也不会生效，控制台无报错，但输入框不出现
新版 Layui（≥ 2.8）：lay-search 只对纯文本 option 生效；若 option 里有 <span></span> 或用了 templet 自定义模板，搜索会失效或错位
远程数据（如从 API 拉取）：lay-search 完全不适用，它只做 DOM 级过滤，不触发请求

用 lay-select 插件替代原生 select 是最稳的方案

官方没提供搜索增强，社区成熟的 lay-select（非 layui 官方，但兼容性好）可直接替换，支持远程搜索、防抖、自定义结果模板、空状态提示等。它不破坏 layui 表单校验和事件体系，只需改两处代码。

引入方式：下载 lay-select.js 和对应 CSS，放在 layui/lay/modules/ 下，或通过 layui.config({paths: { 'lay-select': '/path/to/lay-select'}}) 配置路径
HTML 结构保持不变，仍用 <select id="demo"></select>

初始化写法改为：

layui.use(['lay-select'], function(){
  var laySelect = layui.laySelect;
  laySelect.render({
    elem: '#demo',
    url: '/api/users', // 远程接口，GET 请求，自动带 keyword 参数
    search: true,
    delay: 300, // 防抖毫秒数
    field: {value: 'id', title: 'name'}, // 匹配后端返回字段
    done: function(res){ /* 选中回调 */ }
  });
});

注意：如果后端接口不能接收 keyword 参数，需用 beforeRequest 钩子重写参数，例如：beforeRequest: function(obj){ return {q: obj.keyword}; }

自己封装搜索逻辑时，千万别直接操作 select 的 innerHTML

有人试图监听输入框、用 select.innerHTML = newOptionsHtml 动态替换，这会导致 layui 表单失去对该元素的控制——form.on('select(xxx)') 事件失效，校验样式丢失，甚至引发重复渲染 bug。

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

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

下载

正确做法是保留原始 select 不变，把搜索框作为独立输入控件（<input type="text" class="search-input">），用 layui.dropdown 或绝对定位浮层模拟下拉列表
所有选项 DOM 必须由 layui.dropdown 的 content 参数注入，或用 layui.view 渲染模板，确保与 layui 生命周期同步
关键钩子要补全：change 事件需手动触发 form.val('formFilter', {xxx: value}) 同步表单值，否则提交时拿不到选中项
移动端点击穿透问题常见：浮层未加 z-index 或未阻止 touchstart 默认行为，导致点不到选项

lay-search 开启后性能卡顿？检查 option 数量和内容复杂度

哪怕用了新版 Layui 的 lay-search，一旦 select 里超过 200 个 option，或每个 option 包含图标、多级缩进、内联样式，输入时就会明显卡顿——因为它的搜索是实时遍历所有 option 并切换 display 样式，没做虚拟滚动或节流。

简单优化：用 layui.util.escape() 预处理文本，避免正则匹配 HTML 标签带来的开销
硬性限制：本地搜索建议上限设为 100 条，更多数据必须走远程 + 分页
隐藏技巧：给 select 加 data-filterable="true"，然后在 JS 里用 document.querySelectorAll('option[data-filterable]') 缩小遍历范围，比全量 option 快 3–5 倍
别忽略移动端：iOS Safari 对频繁 display: none/block 切换特别敏感，换成 opacity: 0/1 + pointer-events: none 更顺滑