监听input事件比keyup更可靠，能捕获键盘、粘贴、中文输入法上屏等全部输入行为；ol列表项隐藏必须操作合法li元素，过滤前重置display，注意大小写、空格、空值处理及关键词高亮安全替换。
监听 input 事件比 keyup 更可靠
用 input 事件监听搜索框，能捕获所有输入行为：键盘敲击、粘贴、剪切板操作、中文输入法上屏（如“北京”完整输入后才触发），而 keyup 在中文输入过程中就频繁触发，导致过滤逻辑错乱或空匹配。真实项目中，用户用拼音输入“shu”时还没出“树”，input 会等字真正上屏再响应，更符合直觉。
ol 列表项不能直接用 display: none 隐藏
<ol></ol> 的子元素必须是 <li>，且浏览器对 <li> 的 display: none 支持稳定；但若你误把非 <li> 元素（比如 <div>）塞进 <code><ol></ol>，隐藏逻辑会失效甚至破坏序号计数。正确做法是：只操作 <li> 元素的 style.display，并确保原始 HTML 结构合法：
<ol id="wordList"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ol>
- 用
document.querySelectorAll('#wordList li')获取全部项，别用getElementsByTagName('li')（可能跨嵌套层级） - 每次过滤前先重置所有
<li>的display为''（空字符串，恢复默认） - 匹配失败时设为
'none'，避免残留显示
大小写与空格处理容易漏掉
用户输 “APPLE” 要能匹配 “苹果”，输 “ apple ”（带空格）也不能崩 —— 这两点常被忽略：
- 统一转小写：用
textContent.toLowerCase()和filterValue.trim().toLowerCase() - 空值保护：
opt.textContent?.trim()防止textContent为null或undefined报错 - 空搜索时显示全部：判断
filterValue === ''就跳过匹配逻辑，直接item.style.display = ''
高亮关键词需用 innerHTML + 正则，不能只改 textContent
如果只要求过滤，textContent 够用；但想高亮（比如把“苹果”中“苹”标黄），就必须替换 innerHTML 并插入 <mark></mark> 标签。注意：
立即学习“前端免费学习笔记（深入）”；
- 先用
textContent做匹配判断，再用innerHTML替换渲染，避免 XSS（原始文本不含 HTML） - 正则要加
g和i标志：new RegExp(filterValue, 'gi') - 替换前对
filterValue做正则转义（如用户搜apple(1)，括号会被当元字符），否则报错
真正难的不是写通逻辑，而是处理中文输入法未完成状态、空 option、多次快速输入导致的 DOM 冲突——这些点不加防护，上线后第一波用户反馈就是“搜不到”或“列表闪一下又没了”。
