input事件监听不到表格列的实时输入，因为html表格本身不接收焦点，必须绑定在contenteditable单元格或嵌入的input元素上；正确做法是仅对具备输入能力的元素监听，并通过data-col-key标记目标列、缓存建议值、挂载下拉到body并动态定位，同时修复移动端失焦问题。
为什么 input 事件监听不到表格列的实时输入？
因为 HTML 表格本身不接收焦点，input 事件必须绑定在可编辑的表单控件上——比如 contenteditable 的单元格或嵌入的 <input> 元素。直接给 <td> 绑 <code>input 无效，浏览器不会触发。
常见错误是试图监听整个 <table> 或 <code><tr> 的 <code>input 事件，结果完全没响应。正确做法是：只对实际承载输入内容的元素监听，且需确保该元素具有输入能力。
- 若用
contenteditable="true"，要手动设置tabindex="0"才能获得焦点 - 若用
<input>嵌入<td>，推荐统一 class（如 <code>col-searchable），再用document.querySelectorAll('.col-searchable')批量绑定 - 避免监听
blur做搜索触发——用户可能连续编辑多列，blur会打断流程
如何为指定列（比如第 3 列）动态生成搜索建议？
关键不是“列号”，而是“列的数据来源”。HTML 表格没有语义化列定义，nth-child(3) 在有合并单元格（colspan）时会错位。更可靠的方式是通过 data-col-key 属性标记目标列：
<td data-col-key="product-name">Widget A</td>
然后用 document.querySelectorAll('td[data-col-key="product-name"]') 提取全部值，去重后构建成搜索建议数组。
- 建议值提取后做
.map(t => t.textContent.trim()).filter(Boolean)，避免空格和空文本干扰 - 如果表格数据量大（>1000 行），别每次输入都全量扫描——缓存一次结果，用
Map存data-col-key→Set映射 - 注意中文字符、大小写、全半角，建议建议项统一用
.toLowerCase()比较，但显示仍保留原文
搜索建议下拉菜单被表格 overflow 截断怎么办？
表格父容器常设 overflow: auto，导致绝对定位的下拉菜单（position: absolute）被裁剪。这不是 z-index 能解决的，本质是 stacking context 和 clipping boundary 冲突。
最轻量解法：把建议列表挂到 document.body 下，用 getBoundingClientRect() 动态计算位置：
const rect = inputEl.getBoundingClientRect();<br>dropdown.style.left = `${rect.left}px`;<br>dropdown.style.top = `${rect.bottom}px`;
- 务必监听
window.scroll和resize，重新定位下拉框 - 如果表格在 iframe 或 shadow DOM 内，
getBoundingClientRect()返回的是相对坐标，需额外转换 - 不要用
transform: translate()替代 left/top —— 它不脱离文档流，仍受父容器 overflow 影响
移动端点击建议项后光标丢失、输入框失焦怎么修？
典型表现：点击下拉里的某条建议，<input> 瞬间失去焦点，值没填进去。根源是移动端 click 事件冒泡 + 表格行默认有 touchstart 阻止行为，或建议项用了 <div> 而非 <code><button></button>。
- 建议项必须用
<button type="button"></button>，并加role="option"和aria-selected - 绑定
click时，第一句加event.preventDefault()，防止触发外层td的默认行为 - 赋值后手动调用
inputEl.focus()，必要时加setTimeout(() => inputEl.focus(), 0)确保时机 - 避免在建议项上设
ontouchstart="event.preventDefault()"—— 这会禁掉所有触摸交互
列级搜索建议真正麻烦的不是逻辑，而是表格 DOM 结构带来的边界情况：合并单元格、动态渲染、iframe 嵌套、移动端 focus 策略差异。每一步都要验证真实 DOM 状态，而不是依赖 CSS 选择器表面看起来“应该对”。
