datalist 是浏览器原生前缀匹配提示，非下拉选择器；失效主因是 list 与 id 不匹配、datalist 被隐藏或放错位置、input type 不支持（如 text/search/url 等有效，hidden/checkbox 等无效）、option 缺 value、动态添加 option 不触发更新。
datalist 不是下拉选择器，它只做浏览器原生的前缀匹配提示——用户能输任意内容，也能点选建议，但提交时只取 input.value，不校验、不拦截、不带来源标识。
为什么写了 datalist 却没弹出提示？
最常见失败不是代码写错，而是绑定断裂或渲染被阻断：
-
input的list属性值必须与datalist的id完全一致（大小写、连字符、空格都不能差）；比如list="cities"对应<datalist id="cities"></datalist>，写成"Cities"或"cities-list"就失效 -
datalist不能放在input标签内部（如<input><datalist></datalist>），浏览器直接忽略 -
datalist被display: none隐藏 → 改用visibility: hidden或position: absolute; left: -9999px - 当前
input.type不在支持列表里（见下一条）
哪些 input.type 才触发 datalist 提示？
不是所有类型都有效。浏览器只对明确实现自动完成逻辑的类型启用匹配：
- ✅ 有效：
text、search、url、tel、email、date、number - ❌ 无效：
hidden、checkbox、range、color、file - ⚠️ 注意：
number类型下，用户输入非数字（如"abc"）时，部分浏览器会清空输入框并拒绝匹配——此时提示根本不会出现
option 的 value 为什么不能省？
必须显式写 value，否则行为不可靠：
- 没
value时，某些浏览器会把textContent当作值填入input，但若含空格或 HTML 字符（如&），可能被转义或截断 - 服务端只收到
input.value，它完全取决于用户最终输入的内容——哪怕点了<option value="Shanghai"></option>，也只是把"Shanghai"填进去，没有额外字段说明“这是选的” - 错误写法：
<option>上海</option>；正确写法：<option value="Shanghai">上海</option>
动态加 option 为什么没更新提示？
datalist 不监听 DOM 变化，这是规范定义的行为，不是 bug：
- 用 JS 往
datalist里appendChild新option，浏览器不会自动刷新下拉列表 - 可行方案只有两个：① 替换整个
datalist.innerHTML；② 触发一次input.blur()再input.focus()，强制重绘（但兼容性不稳） - 真正容易被忽略的是：你无法用 MutationObserver 监听
datalist子节点变化来“修复”这个限制——浏览器根本不响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
