chrome/edge支持list+datalist完整交互，firefox仅点击箭头显示且无过滤，safari不渲染ui；跨内核需禁用原生行为并手写浮层，补全aria属性及焦点管理。
list 属性和
Chrome 和 Edge（Chromium 内核）对 list 属性 + datalist 的支持最完整：输入时自动触发下拉联想，支持部分匹配、键盘导航（↑↓→←）、Enter 选中、Tab 跳过。Firefox 表现保守——它只在点击输入框右侧下拉箭头时才显示 datalist 选项，且不响应键盘输入过滤，也不支持部分匹配，仅做全字符串匹配后静态展示。
为什么 list + datalist 在 Safari 上完全不工作
Safari（WebKit）从 iOS 15.4 / macOS Monterey 开始才支持 list 属性，但仍有硬伤：datalist 仅作为“提示源”存在，不渲染任何 UI；用户无法看到选项，也无法用键盘触发联想。这不是 bug，而是 WebKit 官方明确的“未实现交互层”设计决定。所以即使写了 <input list="mylist"><datalist id="mylist">...</datalist>，Safari 用户实际看不到任何下拉菜单。
跨内核可用的最小兼容方案：监听 input + 手动渲染浮层
真要实现一致的联想体验，必须绕过原生 datalist，自己控制展示逻辑。核心是：input 元素保留 list 属性（供语义和基础可访问性），但禁用其默认行为（autocomplete="off"），再用 JS 监听 input 事件做匹配、渲染绝对定位浮层。
- 用
position: absolute浮层 +transform: translateY(100%)对齐输入框底部，避免布局抖动 - 匹配逻辑别只用
String.includes()：中文需考虑拼音首字母（如输入“be”匹配“北京”），建议用segmented-string-match或轻量级拼音库 - 必须处理
blur事件隐藏浮层，否则 Safari 点击空白处不触发focusout导致菜单残留 - 键盘操作要手动接管：
ArrowDown移动高亮项，Enter插入值并 blur，Escape隐藏浮层
容易被忽略的无障碍与焦点管理细节
原生 datalist 自带 ARIA 隐式角色（role="listbox"、role="option"），手写浮层必须补全：role="listbox" 加在浮层容器，每个选项加 role="option" 和 aria-selected="true/false"；输入框需设 aria-autocomplete="list" 和 aria-controls="浮层ID"。否则 VoiceOver/NVDA 无法正确播报选项，键盘用户也无法用 Tab 进入浮层。
更隐蔽的问题是：Safari 在浮层打开时若用户切换 Tab 或呼出系统搜索（Cmd+Space），浮层可能失焦却不触发 blur，导致菜单卡住——得监听 visibilitychange 和 pagehide 事件兜底清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
