layui 2.9.16+ 推荐直接使用 lay-search="{casesensitive: false}",显式配置更清晰可靠;旧版需手动监听 input 事件并统一转小写比对,避免依赖未公开 api 或模糊匹配误判。

layui 2.9.16+ 直接用 lay-search="{caseSensitive: false}"
这是最简单也最稳妥的方式。Layui 从 2.9.16 版本起,lay-search 支持传入配置对象,caseSensitive: false 就是默认行为,显式写出来更清晰、可维护。
常见错误是只写 lay-search="" 或 lay-search,在旧版(如 2.8.x)里它只是个开关,不控制大小写;而在 2.9.16+ 中,空字符串会被解析为默认配置(即不区分大小写),但依赖隐式行为容易误判版本兼容性。
- 必须确保外层有
form.layui-form或div.layui-form,否则lay-search不生效 - 动态插入的
<select></select>必须调用form.render('select'),否则配置不加载 - 如果用了自定义主题 CSS,检查
.layui-input是否被设为display: none—— 搜索框不可见不是逻辑问题,而是样式遮挡
旧版(2.9.15 及以下)只能手动接管搜索逻辑
低版本没有 caseSensitive 配置项,原生搜索底层用的是 String.prototype.indexOf(),天然区分大小写。你不能“关掉”它,只能绕过它。
核心思路是监听搜索输入框的 input 事件,把用户输入和选项文本都转成小写再比对:
- 必须等
form.render('select')执行完再绑定事件,否则.layui-select-title input[lay-search]还没生成 - 推荐用
setTimeout(() => { ... }, 0)做微任务延迟,比直接写在form.render()后更可靠 - 过滤时用
$(this).text().trim().toLowerCase()和val.toLowerCase(),避免toUpperCase()在某些 locale 下出错 - 用
$(this).closest('.layui-form-select').find('dl')定位当前下拉,防止影响其他 select
form.selectSearch 是非公开 API,慎用
有人会尝试 patch form.selectSearch 方法来改匹配逻辑,虽然在 2.9.x 当前版本里可行,但它不是文档公开的接口。
这意味着:
- 下次升级 Layui 时可能被删或签名变更,导致搜索功能彻底失效
- patch 时机必须卡在
form.render()之后、且所有 select 已渲染完成,否则找不到目标函数 - 不同模块加载顺序可能让
form对象还没准备好,直接访问会报undefined
除非你锁死 Layui 版本且专人维护,否则不建议走这条路。
模糊匹配(fuzzy: true)和大小写无关,但常一起用
fuzzy 控制的是匹配位置(子串 vs 前缀),caseSensitive 控制的是字符比较方式。两者正交,可以组合使用:
-
lay-search="{fuzzy: true, caseSensitive: false}":输 “bj” 能命中 “Beijing”、“BJ”、“bj City” -
lay-search="{fuzzy: false, caseSensitive: true}":输 “BJ” 才能命中 “BJ”,“bj” 不行,且只匹配开头 - 注意:如果后端返回的选项值本身含大小写混排(如 API 字段名
userId),开caseSensitive: true才能精确筛选
真正容易被忽略的是——当你的选项文本来自后端、且包含英文缩写或编码值时,caseSensitive: false 可能让用户搜 “api” 意外匹配到 “API_KEY”,这不是 bug,而是设计选择。得提前跟产品确认是否需要这种宽松匹配。











