Layui下拉框select如何实现搜索不区分大小写-Layui教程-PHP中文网

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]