layui select搜索默认区分大小写,需通过监听.layui-select-title input[lay-search]的input事件,统一转小写后手动过滤显隐选项,关键在form.render()后用setTimeout(..., 0)确保DOM就绪再绑定事件。
layui select 搜索默认区分大小写,怎么关掉
layui 的 select 组件开启搜索后(lay-search),底层用的是字符串 indexof 匹配,原生行为就是区分大小写的。它没提供「忽略大小写」的开关,得自己改匹配逻辑。
关键不是“怎么配置”,而是“怎么接管搜索过程”——你需要在 layui.use(['form', 'jquery']) 后,重写 form.selectSearch 的内部匹配函数(注意:这是非公开 API,但当前版本稳定可用)。
- 不推荐直接改 layui 源码,容易被升级覆盖
- 必须等
form.render('select')完成后再 patch,否则 DOM 还没生成,找不到搜索输入框 - patch 时机建议放在
form.on('select(...)', ...)之前,或用setTimeout(..., 0)确保渲染完成
替换 selectSearch 的匹配函数(v2.8+ 有效)
layui 把搜索逻辑封装在 form.selectSearch 方法里,它会遍历 option 文本并调用一个比对函数。我们可以用 jQuery 的 data() 存一个自定义比对器,再在事件委托里拦截输入行为。
实操上更稳的方式是:监听 select 下拉容器里的 input 事件,手动过滤 option 并显隐:
// 假设你的 select 有 lay-filter="city"
form.on('select(city)', function(data){
// 不在这里处理搜索,只响应选中
});
// 在 form.render() 之后执行
setTimeout(function(){
$('.layui-select-title input[lay-search]').on('input', function(){
var val = this.value.trim().toLowerCase();
var $dd = $(this).closest('.layui-form-select').find('dl');
$dd.find('dd').show();
if(!val) return;
$dd.find('dd').each(function(){
var text = $(this).text().trim().toLowerCase();
if(text.indexOf(val) === -1) {
$(this).hide();
}
});
});
}, 0);
- 一定要用
toLowerCase()统一转小写再比,避免toUpperCase()在部分 locale 下出错 -
$(this).closest('.layui-form-select')是关键,确保只影响当前下拉,不波及其他 select - 不要用
filter()+hide()链式调用,layui 内部依赖dd的 DOM 顺序,隐藏后顺序不变,不影响点击
兼容性与边界情况
这个方案在 layui 2.7~2.9 都能跑,但要注意几个真实踩过的坑:
- 如果
option里有空格、全角字符或 emoji,text().trim()不能完全清理,建议额外加.replace(/\s+/g, '')(按需) - 用户粘贴内容时,
input事件可能触发不及时,可补充监听paste事件并setTimeout(..., 10)延迟执行 - 移动端软键盘收起时,iOS Safari 有时不会触发
input,可监听blur作为兜底 - 如果 select 是异步加载的(比如从接口 render),必须等
form.render()回调后再绑定事件,否则找不到.layui-select-title input[lay-search]
为什么不用第三方插件或重写整个 select
有人试过引入 select2 或 chosen,但和 layui 表单验证、主题样式耦合太深,反而更容易崩;也有人想重写 layui.form 源码,结果发现 selectSearch 调用了内部闭包变量 _MOD_INDEX,根本绕不开。
所以最轻量、最可控的做法,就是守住「只动搜索输入行为」这一层:不碰 layui 渲染逻辑,不改核心模块,只劫持输入 → 过滤 → 显隐这个链条。复杂点在于时机控制,而不是逻辑本身。
真正容易被忽略的,是那个 setTimeout(..., 0) —— 少了它,$('.layui-select-title input[lay-search]') 极大概率查不到节点,后面所有代码都白写。

















