datalist是html5原生下拉建议方案，需通过list属性绑定id一致的datalist，仅对部分input类型生效，仅支持前缀匹配且不支持模糊搜索，选中仅填充value不触发事件，移动端及无障碍支持差。
怎么让自动补全不靠JavaScript
原生 autocomplete 属性只能触发浏览器历史/密码管理器的补全，不是下拉建议；真要实现“输入时弹出可选词”，必须用 datalist —— 它是 HTML5 原生方案，不依赖 JS，但兼容性有坑。
-
datalist必须通过list属性绑定到input，且list的值要和datalist的id完全一致（大小写敏感） - 浏览器只对
type="text"、"search"、"url"、"tel"、"email"等部分类型生效，type="number"或"date"会忽略datalist - Chrome 和 Edge 支持较好，Firefox 会显示选项但不支持键盘上下键高亮，Safari 16.4+ 才开始支持键盘导航
datalist 的 option 值怎么填才有效
option 的 value 属性决定补全内容，label 属性只影响下拉中显示的文字（不参与匹配），这点容易被忽略。
- 用户输入时，浏览器只按
value匹配（区分大小写），哪怕label写得再友好也无效 - 多个
option的value重复时，Chrome 只显示第一个，Firefox 可能全部列出但无法区分 - 如果想支持模糊匹配（比如输“be”出现“Berlin”“Beijing”），
datalist做不到——它只做前缀匹配，且不支持正则或自定义逻辑
<input list="cities" /> <datalist id="cities"> <option value="Beijing" label="北京" /> <option value="Berlin" label="柏林" /> </datalist>
为什么输完回车没提交？或者点了 option 没反应
常见错觉：以为选中 datalist 选项会自动触发事件或改变表单行为。其实它只是填充 input 的 value，后续逻辑完全由你控制。
-
change事件在失去焦点时才触发，不是点选项就发；想实时响应，得监听input事件 - 点击
option后，input 的value被设为对应value，但不会触发submit或click - 如果 input 有
required，但用户手动删空了 value，表单校验仍会失败——datalist不提供默认值保障
移动端和无障碍支持的真实情况
在 iOS Safari 上，datalist 几乎不显示下拉；Android Chrome 能显示但常被软键盘遮挡。屏幕阅读器对 datalist 支持极弱，多数只读 input 本身，跳过 list 关联。
立即学习“前端免费学习笔记（深入）”；
- WCAG 2.1 不认为
datalist满足“可预测的输入建议”要求，因为缺乏 ARIA 标识和键盘操作反馈 - 如果项目需支持残障用户或 iOS 主力流量，别单独依赖
datalist；至少加一层aria-autocomplete="list"+ 手动管理aria-activedescendant - 性能上无负担，但 DOM 中大量
option（比如上千条城市名）会让首次渲染变慢，建议服务端分页或前端懒加载
list 和 id 对不上，或者误以为它能替代 autocomplete="on" 的密码填充逻辑。它只解决“有限列表的文本建议”，别的都得自己兜底。 
