下拉列表不能直接用<select>嵌入表格编辑态，因其受table的overflow和z-index限制导致选项截断、无法展开或点击即收；应改用“输入框+绝对定位下拉面板”，监听input事件防抖过滤，滚动时重算位置，mousedown阻止失焦，并用AbortController处理异步竞争。
下拉列表单元格为什么不能直接用 <select> 嵌入表格编辑态？
因为原生 <select> 在表格中点击展开时，会受 table 的 overflow 和 z-index 层叠上下文限制，常出现选项被截断、无法悬停展开、或点击后立即收起——尤其在固定表头/滚动容器里。这不是 bug，是浏览器对 <select> 渲染机制的默认行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃在
<td>里直接放可交互<select>，改用「输入框 + 下拉面板」组合 - 用
contenteditable="false"或禁用原生 focus 轮廓，避免键盘 Tab 焦点跳入混乱 - 下拉面板用
position: absolute+ 动态计算 offsetTop/offsetLeft，而非依赖父级relative（表格单元格的position常为 static）
搜索过滤逻辑该绑定在哪个事件上？input 还是 keyup？
必须用 input 事件，不是 keyup。后者无法捕获粘贴、语音输入、剪贴板拖入等操作，用户粘贴“北京”后下拉没响应，就会认为功能失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，但加setTimeout防抖（300ms），避免每敲一个字都重刷列表 - 过滤时做大小写不敏感匹配：
optionText.toLowerCase().includes(keyword.toLowerCase()) - 空搜索词时，显示全部选项；但要限制最大显示条数（如 20 条），否则长列表卡顿
- 匹配不到时，下拉区显示
<div class="no-result">未找到</div>，而不是留白
如何让下拉面板随表格滚动自动重定位？
表格滚动时，绝对定位的下拉面板不会自动跟着单元格动，这是最常被忽略的坑。靠 CSS 的 position: sticky 或 fixed 都不行——前者不支持嵌套在 table 内，后者脱离文档流导致坐标错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听表格容器的
scroll事件（不是window），每次触发时重新计算目标<td>的getBoundingClientRect() - 不要用
offsetTop：它在有 border-collapse 或 transform 的表格里不准 - 下拉面板的
top设为rect.top + window.scrollY，left设为rect.left + window.scrollX，并加上rect.width对齐右边缘（可选） - 加个
requestAnimationFrame包裹重定位逻辑，避免 scroll 事件频繁触发导致 layout thrashing
怎么避免点击下拉项后表格焦点丢失或编辑态退出？
点击下拉项时，blur 事件会先于 click 触发，导致单元格 contenteditable 失焦、编辑态关闭——这是事件冒泡和 focus 管理混乱的典型表现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给下拉项的
<div>加mousedown.preventDefault()，阻止默认 focus 移动 - 点击项后，手动调用
cell.focus()并设置cell.innerText = selectedText，再触发自定义change事件 - 用
pointer-events: none关闭下拉面板外区域的点击穿透，防止误点其他单元格 - 如果表格用了
tabindex控制导航，确保下拉面板不在 tab 序列里（tabindex="-1"）
真正麻烦的是滚动+聚焦+异步过滤三者叠加时的时机竞争——比如滚动未停、过滤还在跑、用户又点了某项。这种边界情况得靠 AbortController 中断旧请求，再用 WeakMap 缓存每个单元格的最新状态，不然数据就对不上了。
