搜索框必须绑定到原始数据数组而非DOM行，否则翻页排序后失效；应维护dataList并用filter()生成子集重绘tbody，或调用bootstrap-table的load/refreshOptions方法。
搜索框要绑定到表格哪一层数据？
Bootstrap 本身不提供表格数据过滤逻辑，bootstrap-table 或原生 table 都只是渲染层。真正起作用的是你手写的 JavaScript 过滤函数——它必须作用于原始数据数组（不是 DOM 行），否则翻页、排序后会失效。
常见错误：监听 input 事件后直接用 document.querySelectorAll('tbody tr') 遍历并 style.display = 'none'。这在分页或动态加载时立刻崩坏。
- 推荐做法：维护一份干净的
dataList数组，每次输入触发filter()生成新子集，再重绘<tbody> <li>如果用 <code>bootstrap-table插件，必须调用$table.bootstrapTable('load', filteredData)或'refreshOptions'，不能手动操作 DOM - 注意大小写和空格：默认
includes()匹配区分大小写，建议统一转成toLowerCase() - 必须用闭包或变量保存上一个
timeoutId，每次触发先clearTimeout(timeoutId) - 延迟设为
300ms足够，低于 200ms 用户感觉不到“等待”，高于 500ms 显得迟钝 - 如果数据量 > 1000 条，别用
filter()+includes()，改用RegExp.test()预编译正则，或加索引字段（如提前生成searchKey: name.toLowerCase() + '|' + category） - 必须给按钮加
class="btn btn-outline-secondary"，且不能漏掉btn - 输入框需加
class="form-control"，不能只用form-control-sm - 如果用
input-group-text包裹图标，图标容器必须是<span class="input-group-text"><i class="bi bi-search"></i></span>，不能用div - 垂直居中失效？检查父级是否意外加了
align-items-start——input-group默认是flex-align: center - 关键词应作为组件 state 管理（React/Vue）或存入
data-search-key自定义属性（原生 JS） - 高亮要用
innerHTML替换，但必须先textContent转义防 XSS，再用replace(new RegExp(key, 'gi'), '<mark>$&</mark>') - 慎用
mark标签：某些旧版 iOS Safari 不支持样式，可降级为span class="highlight"并配 CSS.highlight { background-color: #ffeb3b; }
怎么让搜索实时响应又不卡顿？
用户每敲一个键就全量遍历几百条数据，CPU 瞬间拉满。关键不是“用 Debounce”，而是“什么时候 debounce”。
错误示范：oninput 里直接写 setTimeout，但没存 clearTimeout 句柄，导致多个定时器并发执行。
Bootstrap 5 的表单控件怎么对齐搜索按钮？
很多人把 <input type="search"> 和 <button></button> 放进 <div class="input-group"> 后发现按钮宽度异常、圆角错位——这是 class 冲突导致的。
<p>典型现象：<code>btn-outline-secondary 在 input-group 里左右圆角消失，或者按钮高度比输入框矮 2px。
搜索后怎么保留关键词并高亮匹配文字？
用户搜完点下一页再回来，输入框空了；或者结果里看不出哪部分被匹配了——这两点体验断层极明显。
错误做法：把关键词存在 localStorage 但没和当前表格数据状态绑定，导致换数据源后关键词还在但无意义。
复杂点在于：多字段联合搜索时，高亮要区分字段来源；中文分词场景下，简单 includes() 会漏掉同义词。这些得靠后端接口支持或前端引入轻量分词库，Bootstrap 本身管不了。
