datalist标签必须配合input的list属性才能生效，仅定义datalist无任何效果；它仅作为选项仓库，需input通过list="id"引用，且id大小写敏感、不可带#号。
dataList 标签必须配 input 的 list 属性才生效
单独写 datalist 没有任何效果，浏览器根本不会显示它。它只是个“选项仓库”，得靠 input 主动引用才能弹出建议列表。
常见错误是只写：
<datalist id="cities"><br><option value="Beijing"><br></option> <option value="Shanghai"><br></option></datalist>然后以为完事了——其实什么都不会出现。
- 必须给
input加list属性，值为datalist的id：<input list="cities"><datalist id="cities">...</datalist>
-
list值大小写敏感，且不能带#（别写成list="#cities"） - 不支持
type="number"或type="date"等非文本型 input；只有type="text"、type="search"、type="url"、type="tel"等可自由输入的类型才触发下拉
option 的 value 和 label 区别要搞清
用户看到的是 label（如果写了），但实际填入 input 的是 value。没写 label 时，value 同时作为显示和提交值。
比如：
<option value="NYC" label="New York City"></option>用户看到 “New York City”，但输入框里填入的是 “NYC”。
- 如果只写
<option>New York City</option>，那显示和值都是 “New York City” -
label是纯展示用，不影响表单提交内容 - 多个
option可以有重复value，但会导致用户无法区分选中项——不推荐
不支持模糊匹配或搜索高亮，纯前缀匹配
浏览器原生 datalist 只做简单前缀匹配：你输 “sh”，只会显示 value 以 “sh” 开头的选项（如 “shanghai”），不会匹配 “tosh” 或 “bash”。
- 没有搜索框、没有滚动加载、没有键盘导航增强（部分浏览器支持上下键，但不统一）
- 不支持正则、不支持中文拼音首字母匹配（比如输 “bj” 不会匹配 “北京”）
- 如果需要更灵活的提示，得换
autocomplete库，比如awesomplete或自研下拉组件 - 移动端 Safari 对
datalist支持弱，iOS 15.4 之前甚至完全不显示下拉 —— 必须做降级（比如 fallback 到select或 JS 渲染）
和 select 的关键区别：用户能自由输入，不限于选项
datalist 不是下拉选择控件，而是“带建议的文本框”。用户可以无视所有 option，直接手输任意内容。
- 表单提交时，input 的值就是用户最终输入的内容，不管是否在
datalist中存在 - 后端不能假设该字段一定等于某个
option.value，仍需校验 - 如果业务上必须强制从列表选，就别用
datalist，改用select+option，或者加 JS 校验（比如失去焦点时检查值是否在允许列表中）
datalist 很快，但忘了 iOS 不显示、或忘了服务端没兜底，上线后才发现用户乱填一堆无效值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
