原生 datalist 输入提示需 input 的 list 属性值严格等于 datalist 的 id，且仅对 text、search、url 等 type 有效；datalist 必须在 body 中、未隐藏，option 需含 value 才参与前缀匹配。
怎么用 list 属性关联 datalist 提示列表
HTML 表单中实现输入提示（类似下拉联想），核心是 input 元素的 list 属性与 datalist 元素配对。这不是 JS 插件，原生就能跑，但绑定错一个字符就完全不生效。
关键点：
-
input的list属性值必须严格等于datalist的id（注意不是name） -
datalist必须在 DOM 中存在，且不能被display: none或hidden隐藏（否则 Chrome/Firefox 会忽略） - 只对部分
type有效：目前仅text、search、url、tel、email、date等支持（number和range不支持）
<input type="text" list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
为什么输了一半没提示？常见失效原因
最常遇到的是“写了 datalist 却没弹出选项”，基本逃不出这几个坑：
-
input缺少type属性（比如写成<input list="xxx">），此时浏览器按默认text处理，但部分旧版 Safari 会忽略 -
datalist放在<head>里 —— 必须放在<body>内，且位置无所谓前后（但得能被解析到） -
option只用了label没写value—— 提示只显示label，但用户选中后填入的是value；如果两者都缺，该option就不参与匹配 - 用户输入内容和所有
option value完全不匹配（区分大小写，且是前缀匹配，不支持模糊或中间匹配）
datalist 和 select 的本质区别在哪
别把 datalist 当成简化版 select —— 它们设计目标完全不同：
-
select是强制选择：用户只能从固定项里挑，提交值必是其中一项 -
datalist是可选提示：用户可以输入任意内容，哪怕和option完全无关，表单照样提交 -
option在datalist中不支持disabled，也不响应change事件（事件只触发在input上） - 无障碍方面：
datalist对屏幕阅读器支持较弱，不能替代语义化的select场景
想让提示更灵活？得靠 JS 补足原生限制
原生 datalist 只做前缀匹配、不支持异步加载、不能高亮关键词、也无法控制弹出时机。真要增强体验，得在它基础上加 JS：
立即学习“前端免费学习笔记（深入）”；
- 监听
input的input事件，动态生成option并替换datalist内容（注意清空旧option，避免重复） - 匹配逻辑自己写：比如转小写比对、支持包含匹配、甚至调 API 拉搜索建议
- 兼容性兜底：Safari 15.4 之前不支持
list属性在某些type上，可检测'list' in document.createElement('input') - 别忘了键盘操作：原生支持上下键选中，但 JS 动态更新后需手动 focus 管理，否则方向键可能失效
datalist 看似简单，但 id 和 list 的拼写一致性、type 的兼容范围、以及“提示 ≠ 限制”这个前提，三处任一出错都会让整个功能静默失败。 
