layui select 无匹配结果时需手动插入提示：监听搜索框 input 事件，遍历 dd 判断是否全隐藏，若为空则添加带 layui-select-tips 类的禁用 dd 并设 cursor:default，注意 iOS 输入法兼容性及弹层作用域。

layui select 无匹配结果时显示提示的正确方式

原生 layui select 不支持直接配置“无匹配提示”，必须通过监听搜索事件 + 手动插入 DOM 实现。它不像 Select2 那样有 noResults 回调，也不能靠 CSS 或属性控制显示逻辑。

为什么 lay-search="true" 后不显示“无匹配”文字

因为 layui 的 lay-search 只负责显隐已有

元素，不生成任何占位提示；当所有

都被隐藏后，下拉面板就空了——它不会自动加一行“无匹配结果”。

• 检查渲染后的 DOM：若
  内没有

  ，说明选项全被过滤掉，但也没额外节点补位
• lay-search 是纯前端过滤，不触发任何回调或钩子，无法拦截“过滤完为空”这个状态
• 试图用 CSS 伪元素（如 ::after）在空容器里加文字不可靠：容器高度为 0，且
  是绝对定位，布局不受父容器内容影响

手动插入“无匹配结果”

的实操步骤

核心思路：监听 input 事件，在搜索框值变化后，遍历所有

，判断是否全部隐藏；若是，就插入一个带固定 class 的
并禁用交互。

深蓝色网站后台管理系统layui框架模板-AdminPro
一款深蓝色网站后台管理系统layui框架模板
下载
• 确保监听的是 select 所在的
  内部的 ，不是原生 —— 它没 input 事件
• 插入前先移除旧的“无匹配”项：$('dd.layui-select-tips').remove()，避免重复添加
• 插入代码示例：

  const searchInput = $('.layui-form-select .layui-input');<br>searchInput.on('input', function() {<br>  const val = $(this).val().trim();<br>  const dds = $('.layui-form-select dd:not(.layui-select-tips)');<br>  const matched = dds.filter(function() {<br>    return $(this).text().indexOf(val) > -1;<br>  });<br>  if (matched.length === 0 && val) {<br>    $('.layui-form-select').append('

  无匹配结果
  ');
  } else {
  $('dd.layui-select-tips').remove();
  }
  });
• 注意：这段代码必须在 form.render('select') 之后执行，否则 .layui-form-select 还没生成

容易被忽略的兼容性细节

这个方案在 iOS 上尤其容易失效，因为中文输入法的 input 事件触发时机不稳定，有时会漏掉首字或延后触发。

• iOS Safari 下建议同时监听 compositionstart 和 compositionend，在输入法组合过程中暂不处理，等 compositionend 后再执行过滤逻辑
• 不要依赖 $(this).val() 直接取值——iOS 中文输入时，input 事件可能返回空字符串，应改用 event.target.value 并做防抖
• 如果 select 在 layer 弹层里，DOM 插入目标要明确指定弹层内的 .layui-form-select，不能全局查——多个弹层会互相干扰
• “无匹配结果”
  必须加 style="cursor:default" 和禁用点击逻辑，否则用户点它会触发默认选中，导致表单值异常