datalist标签本身不渲染界面，仅作为“可选值池”，必须通过input的list属性关联对应id才能生效；仅支持text、search、url、tel、email等类型，type="number"或type="date"因浏览器类型限制不触发下拉。
datalist 标签本身不渲染任何界面，它只提供一个“可选值池”，必须配合 input 的 list 属性才能生效——不是所有 input 类型都支持，也不是点一下就自动提交。
为什么 input type="number" 或 type="date" 不显示 datalist 下拉？
浏览器对 datalist 的支持是类型敏感的。只有以下类型会触发原生下拉建议：
-
text、search、url、tel、email -
number和date在 Chrome/Edge 中被明确忽略；Firefox 可能渲染但无交互 - 即使写了
<input type="number" list="nums"><datalist id="nums"><option value="42"></option></datalist>，用户输“4”也不会弹出建议
想让数字或日期有补全，得换用 type="text" + JavaScript 校验，或者放弃原生方案改用 autocomplete="off" + 自研下拉组件。
怎么让 datalist 真正匹配用户输入（比如输“be”出现“Berlin”“Beijing”）？
datalist 只做**前缀匹配**，且完全由浏览器实现，无法干预匹配逻辑。它不支持模糊搜索、正则、大小写忽略或拼音首字母。
- 输 “bei” → 匹配
<option value="Beijing"></option>✅ - 输 “jing” → 不匹配
Beijing❌（不是子串匹配） - 输 “BER” → Firefox 可能匹配，Chrome 默认区分大小写 ❌
- 想支持拼音首字母（如输“b”出“北京”“柏林”），必须用 JS 动态生成
option并重写value
常见做法：监听 input 事件，AJAX 请求服务端返回匹配项，清空并重写 datalist.innerHTML。
选中 datalist 选项后，为什么表单没提交、也没触发 change？
点击或键盘选中 option 后，浏览器只干一件事：把对应 value 填进 input.value。其余行为全部由你控制。
-
change事件只在失去焦点（blur）且值改变时触发，不是选中就发 - 想实时响应，必须监听
input事件（注意：它在每次输入/粘贴/选中后都触发） -
required属性仍有效——如果用户手动删空了已填的值，提交时仍会报错 - 没有
select那样的onchange回调，也没有click事件冒泡到option
别指望它替代表单控件逻辑；它只是个“值填充器”，后续校验、提交、联动都得自己补全。
iOS Safari 和屏幕阅读器几乎不认 datalist，怎么办？
这是真实兼容性短板，不是配置问题：
- iOS Safari（截至 iOS 17）基本不渲染
datalist下拉面板，Android Chrome 虽支持但常被软键盘遮挡 - 主流屏幕阅读器（NVDA、VoiceOver）通常跳过
list关联，只读input本身，无法告知用户“有建议可选” - WCAG 2.1 明确指出，仅靠
datalist不满足“可预测的输入建议”要求
若项目需通过无障碍审计或主流量在 iOS，至少加一层 aria-autocomplete="list" 和 aria-controls="xxx"，并用 JS 手动管理 aria-activedescendant 和键盘导航（↑↓/Enter）。否则，datalist 在这些场景下形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
