layui select 的 lay-search 属性无法直接禁用,需通过隐藏容器或移除属性实现:推荐全局 css .layui-select-search { display: none !important; },或运行时 $(sel).removeattr('lay-search') 后重渲染表单。

layui select 的 lay-search 属性不能直接禁用搜索框
加 lay-search 就会渲染出搜索输入框,但 layui 没提供“关闭搜索框”的开关属性。所谓“禁止”,本质是隐藏它 + 阻断交互,而不是删掉 DOM 或禁用属性。
常见错误是只设 display: none 或给 input 加 disabled —— 这些操作会被 layui 后续重绘覆盖,或导致下拉面板定位错乱、点击失效。
- 搜索框是 layui 动态插入的,每次
form.render('select')都会重建,CSS 隐藏必须作用于它的父容器(.layui-select-search) - 不能对搜索 input 直接设
disabled,否则键盘焦点会卡住,且部分版本会触发异常 focus 事件 - 若用
lay-search=""但没写值,layui 仍会渲染搜索框;必须显式移除该属性才能避免初始化渲染
彻底隐藏搜索框的 CSS 方案(推荐)
最稳定的方式是用 CSS 把搜索框容器完全隐藏,同时保留下拉逻辑正常工作。Layui 2.8+ 渲染后会在 .layui-form-select 内生成 .layui-select-search 包裹搜索 input,只需精准隐藏它:
.layui-select-search {
display: none !important;
}
注意点:
- 必须加
!important,因为 layui 内联样式会干扰 - 不要写成
.layui-select-search input { display: none }—— 这会导致点击 select 时下拉面板无法正确展开或定位偏移 - 该样式可全局生效,无需按 select ID 单独写,所有带
lay-search的 select 都适用
动态移除 lay-search 属性并重渲染
如果想在运行时彻底“取消”搜索功能(比如权限变化后),不能只隐藏 UI,得从源头移除 layui 的搜索行为:
- 先用
$(selector).removeAttr('lay-search')删除属性 - 再调用
layui.form.render('select', 'your-form-filter')—— 注意传第二个参数(form 容器 filter),否则可能不生效 - 如果 select 是异步插入的(如 AJAX 后 append),必须确保移除属性和 render 都在 DOM 插入完成后执行
这个操作会让 layui 放弃为该 select 创建搜索框,比纯 CSS 更干净。但要注意:一旦移除 lay-search,后续再加回去不会自动恢复搜索功能,必须重新 render。
为什么阻止 focus 事件不是好办法
有人尝试给搜索 input 绑定 onfocus="this.blur()" 或监听 focusin 并 e.preventDefault(),这看似能防点击,但实际问题很多:
- 移动端 touchstart 触发后,blur 会延迟,用户仍能看到键盘弹出一闪
- 键盘导航(Tab 键)会跳到这个不可见的 input,造成焦点丢失或表单跳过其他字段
- layui 内部依赖该 input 的 focus 状态控制下拉展开逻辑,强行 blur 可能导致
.layui-form-select的dl不显示
真正要禁的不是“输入”,而是“存在”。隐藏容器比拦截事件更可靠,也更符合 layui 的渲染机制。
最容易被忽略的是:即使你用 CSS 隐藏了搜索框,只要 lay-search 属性还在,layui 就仍会为其分配 DOM 节点、绑定事件、计算尺寸——这些开销依然存在。所以长期不用搜索功能时,优先考虑移除属性而非仅隐藏。











