原生input无内置联想下拉，必须用JavaScript监听oninput事件实时匹配、动态渲染div下拉列表，并处理键盘导航与定位；datalist仅提供静态前缀匹配且不可样式化。
HTML输入框如何触发联想词下拉显示
原生 <input> 没有内置联想下拉功能，必须靠 JavaScript 控制显隐 + DOM 动态生成列表。关键不是“写个下拉”，而是“在用户输入时实时匹配、定位、渲染、绑定点击”。oninput 是首选事件，比 onkeyup 更可靠（能捕获粘贴、剪切板输入等）。
- 避免用
onchange：它只在失焦时触发，无法实现“边输边联想” - 建议给
<input>加autocomplete="off"，防止浏览器自带下拉干扰 - 下拉容器推荐用
<div>而非<datalist>：<datalist>仅提供提示，不支持高亮、异步加载、键盘导航等核心交互
如何动态生成并渲染匹配的联想词项
匹配逻辑要区分大小写还是忽略大小写，是否支持子串（如输“an”匹配“banana”）还是前缀（如只匹配“android”）。实际项目中多数用 String.prototype.includes() 或正则 new RegExp(keyword, "i")。
- 每次输入都重新过滤数据源，但注意防抖——高频输入时不频繁重绘，可用
setTimeout+clearTimeout控制，延迟 200ms 左右较合理 - 渲染时每个选项用
<div class="suggestion-item">，不要用<li>套<ul>，否则键盘导航（上下键）需额外处理焦点 - 对匹配关键词做简单高亮：用
innerHTML替换为带<mark>的片段，注意先textContent转义防 XSS
怎么让上下方向键和回车键正常操作下拉项
光渲染出来不够，用户得能键盘操作。核心是维护一个 currentIndex 索引，监听 keydown 事件处理 ArrowUp、ArrowDown、Enter 和 Escape。
-
ArrowDown：索引 +1，超出范围则循环回 0；同时滚动容器使当前项可见（element.scrollIntoView({block: "nearest"})） -
ArrowUp：索引 -1，小于 0 则设为最后一项索引 -
Enter：若下拉可见且有选中项，就填入输入框并收起；否则用当前输入值提交 -
Escape：直接隐藏下拉，不清空输入框 - 别忘了
tab和鼠标点击也要同步更新currentIndex，否则键盘和鼠标状态不一致
为什么联想词总不显示或位置错乱
最常见原因是定位问题：下拉层没脱离文档流，或父容器用了 overflow: hidden，或 CSS 没设 position: absolute + 正确的 top/left 偏移。
立即学习“前端免费学习笔记（深入）”；
- 下拉容器必须设
position: absolute，父级<input>设position: relative - 计算 top 值建议用
input.getBoundingClientRect().bottom，而非offsetTop + offsetHeight（后者受 margin、transform 影响） - 如果页面有滚动，需监听
scroll事件并重置下拉位置，或改用position: fixed+ 动态计算视口坐标 - 移动端要注意
focus时机：iOS Safari 在input获焦后才触发oninput，首次输入可能漏一次，可加一次手动触发
真正难的不是写出第一个可工作的下拉，而是让它在各种缩放、滚动、嵌套容器、暗色模式、屏幕阅读器环境下都稳定响应。尤其是 getBoundingClientRect 在 iframe 或 zoom 缩放时行为不一致，这点容易被忽略。
