搜索栏必须监听 input 事件而非 keyup 或 change，因后者无法覆盖粘贴、自动填充等场景；取值用 e.target.value.trim()；多搜索栏用 data-target 绑定；前缀匹配用 startswith，精确匹配需大小写与空格归一化；显隐操作直接设 style.display；超 500 行需缓存 dom 文本。
搜索栏必须用 input 监听 input 事件，不是 keyup 或 change
用户粘贴、自动填充、语音输入时，keyup 完全不触发，change 要等失焦才执行——搜索体验直接断裂。只有 input 事件能覆盖所有输入路径，且响应及时。
常见错误写法：onkeyup="filterItems()" 或 addEventListener('change', ...)；正确写法是：
const searchInput = document.getElementById('search-bar');
searchInput.addEventListener('input', function(e) {
const query = e.target.value.trim();
// 后续过滤逻辑
});
-
e.target.value是唯一可靠取值方式，e.value会报undefined -
trim()必须加，否则空格导致前缀匹配失败（比如搜btn匹配不到btn-1） - 若页面有多个搜索栏，用
data-target显式绑定目标元素，避免全局污染
过滤逻辑要区分「前缀匹配」和「精确匹配」，别混用
按钮/列表项按 ID 前缀显示（如输入 user 显示 user-create、user-delete），这是典型前缀场景；但 Excel 数据按客户 ID 精确查找（输入 CL2026 只应显示唯一一行），两者 DOM 查询和比对方式完全不同。
- 前缀匹配：用
el.id.startsWith(query)或(el.alt || el.id).startsWith(query) - 精确匹配：用
cellText.trim().toLowerCase() === query.toLowerCase()，注意大小写和空格归一化 - 表格过滤时，不能只查第一列——要用
row.cells遍历所有td，否则搜姓名在第二列就失效
隐藏/显示必须统一用 style.display，别依赖 class 切换
靠添加 .hidden class 控制显隐看似优雅，但容易被其他 CSS 规则覆盖（比如 .searchItem { display: flex !important; } 就会让 display: none 失效）。直接操作 style.display 更可控、更轻量。
- 显示元素：设为
'block'（块级）、'inline-block'（按钮常用）或''（恢复默认） - 隐藏元素：统一设为
'none'，不要用'hidden'或'invisible'这类无效值 - 空搜索时，必须显式恢复所有项的显示状态，否则上次过滤残留的
display: none会卡住后续展示
性能临界点在 200 行以上，500 行必须做 DOM 缓存
每敲一个字都遍历全部 tr 并读取 textContent，浏览器重排重绘压力陡增。200 行以内可接受，超 500 行就会明显卡顿。
- 提前缓存：用
Array.from(rows, r => Array.from(r.cells).map(c => c.textContent?.trim() || ''))把文本抽成二维数组 - 搜索时只比对内存数组，不再访问 DOM
- 节流不是首选方案——
input事件本身已足够轻量，节流反而导致输入延迟感；真卡顿时优先优化数据结构 - 表格必须显式写
<tbody>，否则 Safari 等旧浏览器可能不生成该节点，<code>querySelectorAll('tbody tr')返回空 真实项目里最常被跳过的，是空搜索时的显隐重置和大小写归一化处理——这两处漏掉，用户一清空输入框，列表就卡死或错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
