关键在于input的list属性值必须与datalist的id完全一致且同DOM树；datalist仅提供前缀匹配建议，不约束输入，无原生选中事件，动态更新需blur/focus触发重绘，iOS Safari不支持补全面板。
如何让 <input> 使用 <datalist> 实现本地自动补全
直接生效的关键是：input 的 list 属性值必须与 datalist 的 id 完全一致，且二者需在同一个 DOM 树中（不能跨 shadow DOM 或 iframe）。
常见错误是拼写不一致，比如 list="cities" 对应的 datalist 却写了 id="city-list"，此时浏览器完全忽略补全逻辑，也不报错。
<input list="browsers"><datalist id="browsers"><option value="Chrome"><option value="Firefox"></datalist>-
option不需要label属性也能工作；加了label只影响下拉显示文本，不影响匹配逻辑 - 用户输入时，浏览器只做**前缀匹配**（例如输 “ch” 会匹配 “Chrome”，但输 “rome” 不会），且不区分大小写
datalist 和 select 的核心区别在哪
datalist 是“建议列表”，不是约束；用户仍可自由输入任意内容，包括空值或不在列表中的值。而 select 强制从选项中选，且无法自由编辑。
典型误用场景：想做「仅允许从列表中选择」却用了 datalist —— 这时后端或 JS 必须二次校验，否则表单提交非法值。
立即学习“前端免费学习笔记（深入）”；
- 提交表单时，
input的value就是用户最终输入的字符串，和datalist无关 - 没有原生事件监听“选中某条 option”，只能监听
input或change，再手动比对当前值是否在option集合里 - 若需禁用自由输入，得配合
required+ JS 拦截 + 后端兜底，datalist本身不提供该能力
动态更新 datalist 选项时要注意什么
直接操作 datalist 的 innerHTML 或增删 option 元素是可行的，但浏览器不会自动刷新下拉菜单的可见状态 —— 已展开的补全面板不会实时更新，用户需再次聚焦/输入触发重绘。
更可靠的做法是：先移除 input 的焦点（blur()），再更新 datalist，最后恢复焦点（focus()），这样能强制浏览器重新读取选项。
- 不要用
new Option()直接 append 到datalist，部分老浏览器不支持；改用document.createElement("option")+appendChild - 大量选项（如上千条）会导致下拉卡顿，建议限制数量或改用虚拟滚动 + 自定义下拉组件
-
option的value值必须是字符串；传数字或对象会隐式转成字符串，但容易引发意料外的匹配行为（如value={123}→"123"）
兼容性与移动端的现实表现
桌面端 Chrome/Firefox/Edge 支持良好，但 Safari 一直不支持 datalist 的键盘导航（↑↓ 键无法选择选项），仅靠鼠标点击；iOS Safari 则完全不显示补全面板，只保留输入框本身。
这意味着：依赖 datalist 做核心交互的表单，在 iOS 上等于退化为普通 input，务必提前降级处理。
- 可用
"list" in document.createElement("input")检测原生支持 - 检测失败时，建议 fallback 到轻量级 JS 补全库（如
awesomplete），而非强行模拟 - Android WebView 行为取决于系统 WebKit 版本，5.0+ 一般可用，但长按粘贴可能绕过补全逻辑
真正麻烦的是：它看起来很轻量，实际在边缘设备和旧系统上一致性极差，上线前必须真机测 iOS 和低端 Android。
