<datalist>不能当搜索下拉框用，因其仅为浏览器提供的静态建议源，不支持键盘导航、无选中事件、iOS Safari常忽略，且不满足WCAG组合框语义要求。
原生 <datalist> 能快速实现基础自动完成，但不支持键盘导航、无法监听选中事件、样式不可控；真要“搜索+下拉+聚焦+回车确认”闭环，必须用 <input> + 手动管理的 role="listbox" 结构。
为什么 <datalist> 不能当搜索下拉框用
它只是浏览器提供的“建议源”，不是可交互控件：用户点击某 <option> 后，输入框值被填入，但你无法知道是哪条被点中（没事件）；ArrowDown 不会聚焦选项，Enter 直接提交表单；iOS Safari 常直接忽略 <datalist>，退化为普通文本框。更关键的是，它不满足 WCAG 的组合框（combobox）语义要求——屏幕阅读器读不出“已展开”“共 5 条建议”这类状态。
常见误用现象：<input list="xxx"> 写对了，但用户按方向键毫无反应；或者在 Chrome 中能点选，在 Safari 中点了没反应，输入框也不更新。
-
<datalist>的匹配逻辑由浏览器决定，不支持拼音、高亮、远程数据 - 无法设置
tabindex或绑定keydown，所有键盘行为都是原生且不可干预的 - 样式几乎不可定制：Chrome 渲染的下拉框宽高、圆角、字体全由 UA 样式控制，
::-webkit-listbox等伪元素无标准支持
role="combobox" 结构必须写的三处属性
这是让辅助技术、键盘导航、脚本控制真正生效的前提，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
<input type="text" role="combobox" aria-expanded="false" aria-controls="suggestions-list">：显式声明角色、展开状态、所控容器 ID -
<div role="listbox" id="suggestions-list">：不能用<ul>，因为role="listbox"语义要求子元素是role="option"，而非<li> -
<div role="option" data-value="xxx" tabindex="-1">xxx</div>：每个选项必须设tabindex="-1"，否则脚本调用.focus()无效；data-value存实际提交值，文本内容可另加描述
初始时下拉容器可以 display: none，但绝不能从 DOM 移除——否则 aria-controls 失效，屏幕阅读器找不到目标。
keydown 必须拦截的四个按键及其处理逻辑
浏览器不会自动为自定义下拉实现方向键导航。不接管，ArrowDown 会让光标移到输入框末尾，Enter 会提交表单，Escape 可能只清空输入框而不收起下拉。
-
"ArrowDown"：阻止默认行为；若当前无聚焦项，聚焦第一个role="option"；否则聚焦下一个，到末尾时循环回第一个 -
"ArrowUp"：同理，聚焦上一个，到开头时循环至末尾 -
"Enter"：取当前聚焦的[role="option"]的dataset.value填入输入框；触发搜索或提交；收起下拉 -
"Escape"：收起下拉；input重新获得焦点；清空当前高亮索引
注意：event.preventDefault() 必须在判断按键类型后立即调用，晚于焦点操作会导致部分浏览器（如 Firefox）仍执行原生滚动。
焦点丢失是键盘导航中断的最常见原因
用户鼠标点击某建议项后，焦点未必落到该 role="option" 上；Tab 离开再返回输入框，下拉可能还开着，但焦点已在别处——此时方向键完全失效。
解决方案很具体：
- 所有
[role="option"]必须有tabindex="-1"，确保能被脚本聚焦 - 鼠标点击某项时，除了填值、收起下拉，必须立刻执行
optionEl.focus() - 监听
input的blur事件：若下拉处于展开态，用setTimeout(() => { if (!container.matches(':hover')) hide() }, 200)延迟收起，给用户留出移动鼠标到下拉区域的时间
这个 200ms 是实测出来的平衡点：太短（50ms）容易误收，太长（500ms）会让用户觉得响应迟钝。Chrome 和 Firefox 对 role="option" 的焦点支持差异仍在，不能依赖“点了就自动聚焦”这种假设。
