list属性必须严格匹配datalist的id值，大小写、空格、引号均需一致；仅对text等特定type生效；datalist仅读取option的value属性，且需显式声明；移动端行为有差异，建议真机测试。
list 属性必须匹配 datalist 的 id 值
这是最常出错的地方：list 属性不是写元素名或 class，而是严格对应 <datalist id="xxx"></datalist> 中的 id 值。大小写、空格、引号都得一致。
常见错误现象：<input list="suggestions"> 却写成 <datalist id="SUGGESTIONS"></datalist> 或 <datalist id="suggestions "></datalist>（尾部空格），此时浏览器完全忽略匹配，下拉建议不出现。
-
list值是纯字符串，不加#（区别于 CSS 选择器） - 同一页面可复用一个
datalist绑定多个input，只要list值相同 - 若
id不存在，输入框行为不变，无报错、无警告，调试时容易漏查
input 必须是 text、search、url、tel、email、password 或 number 类型
list 属性只对部分 type 生效。设为 type="checkbox" 或 type="hidden" 时，list 被浏览器静默忽略。
使用场景：搜索框补全、地址/城市/品牌名称输入等需要用户自由输入 + 智能提示的场景；不适合纯选项选择（此时应改用 <select></select>）。
- 推荐用
type="text"—— 兼容性最好，所有现代浏览器支持 -
type="search"在 Safari 中会显示清除按钮，但 datalist 行为一致 -
type="number"虽支持list，但提示项会被强制转为数字，非数值字符串（如 "unknown"）可能被过滤或显示为空
datalist 内部 option 的 value 是唯一生效字段
<datalist></datalist> 只读取 <option value="...">></option> 中的 value 属性作为建议项。label、文本内容、data-* 属性均不参与匹配或显示。
错误写法：<option>Beijing</option> —— 这种没有 value 的写法在 Chrome/Firefox 中不显示建议；Edge 旧版可能 fallback 到文本内容，但不可靠。
- 必须显式写
<option value="Beijing"></option>或<option value="Beijing">北京市</option>（后者文本仅作视觉参考，不参与匹配逻辑） - 重复的
value不会报错，但建议去重，避免 UI 显示冗余项 - value 中含空格、中文、符号均可，但需注意 URL 编码问题（如用于 query 参数时）
移动端兼容性与聚焦行为差异
Android Chrome 和 iOS Safari 均支持 list + datalist，但触发时机不同：iOS 需点击输入框后才弹出建议，且键盘上方不显示候选栏；Android 多数版本会在输入时动态下拉匹配项。
性能影响极小，datalist 是静态声明，不触发 JS 或网络请求。但若 <option></option> 数量超 500 条，部分低端安卓机型可能出现渲染延迟。
- 不要依赖
focus或input事件监听来“激活” datalist —— 它是纯 HTML 行为，无需 JS - 无法用 CSS 伪类
::-webkit-list-button控制下拉箭头（该伪类针对<select></select>），datalist无对应样式接口 - 测试时务必真机验证：模拟器常忽略平台级输入法交互逻辑
实际可用的最小完整范例：
<input type="text" list="browsers"><datalist id="browsers"><option value="Chrome"></option> <option value="Firefox"></option> <option value="Safari"></option> <option value="Edge"></option></datalist>注意
id 和 list 的拼写一致性，以及每个 option 都带 value —— 少一个就少一条建议。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
