HTML怎么在ol列表中实现搜索过滤-html教程-PHP中文网

监听input事件比keyup更可靠，能捕获键盘、粘贴、中文输入法上屏等全部输入行为；ol列表项隐藏必须操作合法li元素，过滤前重置display，注意大小写、空格、空值处理及关键词高亮安全替换。

html怎么在ol列表中实现搜索过滤

监听 input 事件比 keyup 更可靠

用 input 事件监听搜索框，能捕获所有输入行为：键盘敲击、粘贴、剪切板操作、中文输入法上屏（如“北京”完整输入后才触发），而 keyup 在中文输入过程中就频繁触发，导致过滤逻辑错乱或空匹配。真实项目中，用户用拼音输入“shu”时还没出“树”，input 会等字真正上屏再响应，更符合直觉。

ol 列表项不能直接用 display: none 隐藏

的子元素必须是

，且浏览器对

的 display: none 支持稳定；但若你误把非

元素（比如 ）塞进，隐藏逻辑会失效甚至破坏序号计数。正确做法是：只操作

 元素的 style.display，并确保原始 HTML 结构合法：<ol id="wordList">
<li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

用 document.querySelectorAll('#wordList li') 获取全部项，别用 getElementsByTagName('li')（可能跨嵌套层级）
每次过滤前先重置所有 
 的 display 为 ''（空字符串，恢复默认）
匹配失败时设为 'none'，避免残留显示

大小写与空格处理容易漏掉
用户输 “APPLE” 要能匹配 “苹果”，输 “  apple  ”（带空格）也不能崩 —— 这两点常被忽略：

统一转小写：用 textContent.toLowerCase() 和 filterValue.trim().toLowerCase()

空值保护：opt.textContent?.trim() 防止 textContent 为 null 或 undefined 报错
空搜索时显示全部：判断 filterValue === '' 就跳过匹配逻辑，直接 item.style.display = ''


高亮关键词需用 innerHTML + 正则，不能只改 textContent
如果只要求过滤，textContent 够用；但想高亮（比如把“苹果”中“苹”标黄），就必须替换 innerHTML 并插入  标签。注意：

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										

先用 textContent 做匹配判断，再用 innerHTML 替换渲染，避免 XSS（原始文本不含 HTML）
正则要加 g 和 i 标志：new RegExp(filterValue, 'gi')

替换前对 filterValue 做正则转义（如用户搜 apple(1)，括号会被当元字符），否则报错

真正难的不是写通逻辑，而是处理中文输入法未完成状态、空 option、多次快速输入导致的 DOM 冲突——这些点不加防护，上线后第一波用户反馈就是“搜不到”或“列表闪一下又没了”。