datalist 下拉菜单依赖 list 与 id 字符级完全匹配，仅 text、search、url、tel、email、number 等 type 支持，value 属性必填且唯一生效，移动端尤其 ios safari 基本不支持，无校验无限制需 js+后端兜底。
list 属性必须与 datalist 的 id 字符级完全匹配
浏览器不会报错，但只要 list 值和 id 有任意一处不一致，下拉菜单就彻底不出现。这不是兼容性问题，是硬性绑定规则。
-
list="browsers"必须对应<datalist id="browsers"></datalist>—— 大小写、空格、连字符、下划线，全部敏感 - 写成
list="Browsers"、list=" browsers "、list="browser-list"（而id="browser_list"）都会失效 -
name或class属性完全无关，别试图用它们“替代”id -
datalist可以放在页面任意位置（、底部都行），只要 DOM 中存在即可
哪些 input type 真正支持 list 属性
不是所有 type 都能触发下拉建议。写了 list 却没反应？先查类型是否在白名单里。
- 稳定支持：
text、search、url、tel、email、number - 部分支持但慎用：
date（Chrome 有提示，Safari 基本无响应）、range（只显示滑块，不提供选项） - 完全不支持：
password、hidden、checkbox、radio、file、datetime-local -
autocomplete="off"会直接禁用整个datalist功能，哪怕其他条件全对
option 的 value 是唯一生效字段，label 仅作显示别名
<option></option> 标签里只有 value 属性参与匹配和提交，其他都是摆设。
- ✅ 正确：
<option value="ff"></option>或<option value="ff">Firefox</option>（文本内容被忽略） - ❌ 无效：
<option>Firefox</option>（无value）、<option value=""></option>（空值） -
label属性可选，例如<option value="en" label="English"></option>，但多数浏览器只显示label文本，提交值仍是"en" - 不要试图在
value里塞 HTML、data-id或其他属性——浏览器只读纯字符串
移动端和 Safari 的现实约束很硬
别在 iOS Safari 上测试成功就以为万事大吉。这个特性在移动端基本不可靠。
- iOS Safari（包括最新版）几乎不渲染
datalist下拉面板，点击输入框后通常什么也不弹 - Android Chrome 大部分版本支持，但行为不统一：有的只响应前缀匹配，有的支持子串，且键盘自动补全可能干扰判断
- 没有
onselect事件，无法区分用户是手输还是点选；选中后只触发input和change - 样式几乎无法定制：
::-webkit-list-box仅限 Chromium，且只允许改字体、颜色、背景等极少数属性
真正容易被忽略的是：它既不校验输入，也不限制提交，更不保证用户看到选项——所有关键逻辑仍得靠 JS + 后端兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
