Layui原生lay-search不支持关键词高亮，因其仅控制dd显隐而不修改文本内容；必须手动遍历匹配的dd元素，转义搜索词后用正则替换textContent并包裹标签，再赋值给innerHTML，同时需定义CSS样式确保视觉生效。
Layui 原生 lay-search 不会高亮关键词，必须手动干预 DOM 渲染逻辑——加个属性解决不了，得改 dd 元素的 innerHTML。
为什么 lay-search 不高亮？
因为 lay-search 只控制 dd 的显隐（调用 notOption 函数），它从不修改文本内容，也不插入 <em> 或其他标签。高亮是纯前端渲染行为，Layui 把这部分完全交给你自己处理。
-
dd是 Layui 渲染后生成的下拉项 DOM 节点，不是原始<option> - 直接操作
option没用，innerHTML更新必须发生在 Layui 渲染完成之后、用户输入触发搜索匹配之后 - 正则未转义时，用户输
*、(、[会直接报错
手动替换 dd.innerHTML 实现高亮
监听 input 事件，在搜索逻辑执行后、DOM 更新前，遍历所有匹配的 dd，对其文本做关键词包裹。
- 用
$('#mySelect dd')获取渲染后的选项节点（注意不是select option） - 对每个
dd.textContent执行正则替换，先转义关键词：val.replace(/[.*+?^${}()|[]\]/g, '\$&') - 用
new RegExp(`(${escapedVal})`, 'gi')匹配并替换为<em>$1</em> - 赋值给
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>$1</em>');
}
用 xm-select 插件时怎么安全高亮？
如果你用了 xm-select，它提供 templet 配置项，比手动操作 dd 更可控、时机更可靠。
-
filter控制是否显示该选项（返回布尔值） -
templet接收item和当前val，可自由拼接带<em>的 HTML 字符串 - 同样要对
val做正则转义，否则用户输入特殊字符会崩溃 - 必须在 CSS 中定义
em样式，比如em { background: #ffe6b3; font-style: normal; }，否则高亮不可见
容易被忽略的细节
高亮不是“加个 <em>”就完事，真实项目里常踩这几个坑：
- 中文多音字、拼音缩写（如输入
GZ匹配“广州”）需要额外引入拼音库（如pinyin-pro），lay-search原生不支持 - 远程搜索时，高亮逻辑必须等新
dd插入 DOM 后再执行，不能在 AJAX 回调里立刻遍历 —— 要等xm-select的done回调或 Layui 的form.render('select')完成 - 表格中用
templet高亮时，必须先提取纯文本再替换，否则会误匹配 HTML 属性（比如data-id="keyword"）或引入 XSS 风险
