input事件比keydown更适合监听搜索输入，因其在值真正变化后触发，能准确捕获粘贴、中文输入法上屏等场景，避免拼音字符干扰。

input事件比keydown更适合监听搜索输入

直接用 keydown 捕获搜索词容易漏掉粘贴、中文输入法上屏、剪切板操作等场景，input 事件在值真正变化后触发，更可靠。尤其在用户用拼音输入法打“shu”再选“书”时，keydown 会捕获到一堆无意义的拼音字符，而 input 只在最终“书”上屏后才触发。

实操建议：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 绑定 input 事件而非 keydown 或 keyup
• 加防抖（debounce），比如延迟 300ms 再发起联想请求，避免每敲一个字都调接口
• 对空字符串、纯空格、长度＜2 的输入可直接跳过请求，减少无效调用

用datalist实现轻量级本地联想，不发请求

datalist 是原生支持的下拉提示方案，适合关键词固定、数量不多（几百条以内）的场景，比如常见城市、品牌名、历史搜索记录缓存。

实操建议：

• 把 <datalist id="search-suggestions"></datalist> 和 <input list="search-suggestions"> 配对使用
• 动态更新 datalist 时，清空后用 innerHTML 或循环 appendChild 插入 <option value="xxx"></option>，别用 innerText，否则 value 会丢失
• 注意：Chrome 会自动过滤匹配项，但 Safari 对中文匹配支持弱，输入“北”可能不显示“北京”，需测试

fetch + AbortController 控制联想请求的生命周期

用户快速输入时，前一个请求还没返回，后一个已发出——若不取消旧请求，界面可能显示错乱结果（比如先搜“python”，又搜“pyt”，结果却渲染了“python”的联想项）。

实操建议：

• 每次发起 fetch 前创建新的 AbortController，保存其 signal 到闭包或实例字段
• 在下一次输入触发新请求前，调用上一个 controller.abort()
• 服务端接口最好支持 query 参数带 timestamp 或 random 字段，方便调试是否真被 abort（看 Network 中状态是否为 canceled）

联想列表定位与焦点管理容易被忽略

光渲染出下拉列表还不够，用户按上下键应能移动高亮项，回车应提交选中项——这需要手动接管键盘行为，且不能破坏屏幕阅读器体验。

实操建议：

• 监听 keydown 仅用于导航（↑↓/Enter/Escape），不用于触发请求；和前面的 input 事件分工明确
• 用 aria-activedescendant 关联 input 和当前高亮 <li>，比直接 focus() 列表项更兼容读屏软件
• 点击列表项后，记得恢复 input 获焦，并设置 value 为选中值，再触发搜索——别只改显示没改真实 value

实际项目里最常出问题的是请求取消逻辑和焦点同步，这两处一错，用户就会觉得“联想不跟手”或“点错了词”。建议先写个最小可运行 demo，只做输入→请求→渲染→回车提交四步，跑通再加防抖、样式、无障碍。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！