datalist 为 input 提供原生前缀匹配提示，非强制下拉选择器；需 list 与 id 严格匹配、datalist 不在 input 内、不隐藏，仅 text/search/url/tel/email/date/number 类型有效，option 必须带 value，且不响应动态 dom 变化。
datalist 的作用不是做下拉选择器，而是为 input 提供浏览器原生的前缀匹配提示——用户能自由输，也能点选建议，不强制校验，不参与表单提交逻辑。
为什么输入没弹出下拉？检查 list 和 id 是否严格匹配
最常见失败原因是绑定断裂：input 的 list 属性值必须与 datalist 的 id 完全一致（大小写、空格、连字符都不能差）：
-
input写了list="cities"，但datalist的id是"Cities"或"cities-list"→ 不触发 -
datalist放在input标签内部（如<input><datalist></datalist>）→ 浏览器忽略 -
datalist被display: none隐藏 → 建议改用visibility: hidden或绝对定位移出视口
哪些 input type 才会触发 datalist 提示？
不是所有 type 都支持。只有浏览器明确实现自动完成逻辑的类型才生效：
- ✅ 有效类型：
text、search、url、tel、email、date、number - ❌ 无效类型：
hidden、checkbox、range、color、file - ⚠️ 注意：
number类型下，用户输入非数字时（如“abc”），部分浏览器会清空输入框并拒绝匹配，导致提示失效
option 的 value 属性为什么不能省？
option 必须带 value，否则行为不可靠：
- 没
value时，某些浏览器会把textContent当作值填入input，但若含空格或 HTML 字符（如&），可能被转义或截断 - 服务端接收时，只拿到
input.value，而它完全取决于用户最终输入的内容——哪怕点了option，也仅是把value填进去，没有额外标识“这是选的” - 正确写法：
<option value="Shanghai"></option>，不要写成<option>上海</option>
真正容易被忽略的是：datalist 不监听 DOM 变化。你用 JS 动态往 datalist 里加 option，浏览器不会自动刷新提示列表——得手动替换整个子节点，或者触发一次 input 的 blur + focus 才可能重绘。这不是 bug，是规范定义的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
