Layui下拉框select如何根据搜索关键字高亮显示匹配项-Layui教程-PHP中文网

layui原生select不支持关键词高亮，因lay-search仅控制dd显隐而不修改文本；需手动在dd.innerhtml中用正则替换关键词并包裹标签，注意转义、时机及dom层级。

layui 原生 select 组件不支持关键词高亮，必须手动干预渲染逻辑——不是加个属性就能解决的事。

为什么原生 lay-search 不高亮？

因为 lay-search 只控制选项的显隐（调用 notOption 函数遍历 dd 并设 display），它从不修改 DOM 文本内容，更不会插入  或其他标签包裹关键词。高亮是纯前端渲染层行为，Layui 把这部分完全交给你自己处理。

最简可行方案：改写 dd 的 innerHTML

在搜索匹配逻辑执行后、DOM 更新前，对每个匹配项的文本做一次关键词替换。关键点在于：不能直接操作原始 option，而是操作 Layui 渲染出的 dd 元素。

监听 input 事件后，先拿到当前输入值 val
遍历所有 $('#inputSelect dd')（注意：不是 select option）
对每个 dd 的 textContent 执行 replace，用正则包裹关键词：new RegExp(val, 'gi')
把替换结果赋给 dd.innerHTML，但要确保只替换文本部分，避免破坏 onclick 等属性

示例片段：

function highlightText(dd, val) {
  if (!val) return;
  const text = dd.textContent || dd.innerText;
  const escapedVal = val.replace(/[.*+?^${}()|[]\]/g, '\$&'); // 转义正则特殊字符
  const regex = new RegExp(`(${escapedVal})`, 'gi');
  dd.innerHTML = text.replace(regex, '<em style="color:#01AAED">$1</em>');
}

使用 xm-select 时 filter + templet 组合实现高亮

如果你用的是第三方增强插件 xm-select，它提供 templet 配置项，可安全注入 HTML。这时高亮逻辑更可控，且不依赖 DOM 操作时机。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

filter 仍负责是否显示该选项（返回布尔值）
templet 负责怎么显示，接收 item 和 val，可自由拼接带  的字符串
注意：必须对 val 做正则转义，否则用户输 * 或 ( 会报错
别忘了在 CSS 中定义 em 样式，否则高亮无视觉反馈

templet 示例：

templet: function(item, val) {
  if (!val) return item.name;
  const escaped = val.replace(/[.*+?^${}()|[]\]/g, '\$&');
  const html = item.name.replace(new RegExp(`(${escaped})`, 'gi'), '<em>$1</em>');
  return html;
}