list属性是HTML中绑定<input>与<datalist>的唯一标准方式，必须设于<input>上且值为对应<datalist>的id（大小写敏感、无#前缀），仅对部分type生效，option必须含value属性，label可选，下拉菜单为浏览器原生控件不可样式化或事件监听。
用 list 属性绑定 <datalist> 是唯一标准方式
HTML 中没有其他属性能实现输入框与 <datalist> 的关联，list 是强制且唯一的桥梁。它必须是 <input> 的属性，值为对应 <datalist> 的 id，大小写敏感，且不能带 # 前缀。
常见错误现象：list="my-list" 却写成 list="#my-list" 或 list="mylist"（ID 不匹配），导致补全完全不触发；或者把 list 写在 <datalist> 上，无效。
-
<input list="suggestions">→ 必须对应<datalist id="suggestions"> - ID 必须全局唯一，避免多个
<input>意外共用同一份选项 - 仅对
type="text"、"search"、"tel"、"url"、"email"、"number"等部分类型生效（"password"和"hidden"明确不支持）
<datalist> 里的 <option> 只要 value 就行，label 是可选的
浏览器只读取 <option> 的 value 属性作为候选文本；label 仅用于在下拉列表中显示别名（例如 <option value="en" label="English">，用户看到 “English”，但输入后实际填入的是 “en”）。不写 label 完全不影响功能。
容易踩的坑：误以为需要 label 才能显示，或把内容写在标签体里（如 <option>Chrome</option>），这种写法在多数浏览器中会被忽略 —— 必须用 value。
- 正确：
<option value="Firefox"></option> - 带提示名：
<option value="ff" label="Firefox"></option> - 错误：
<option>Firefox</option>（无value，基本不生效）
自动补全行为由浏览器原生控制，无法用 CSS 或 JS 直接干预下拉样式
点击输入框触发的下拉菜单是 UA（用户代理）控件，不是 DOM 元素，所以 <datalist> 本身不可见、无法用 CSS 选中、也不能监听 “下拉展开” 事件。所有样式定制和交互增强都必须绕道：
- 不能用
:focus + datalist或类似选择器控制下拉外观 - 没有
onshow/onhide事件，只能监听input或change判断用户是否选择了建议项 - 若需完整自定义（如远程搜索、分组、图标），得弃用
<datalist>，改用autocomplete库或手写下拉组件
性能上很轻量 —— 浏览器只在聚焦时解析 <datalist>，不预加载、不发请求、无运行时开销。
兼容性足够好，但 Safari 对空格/特殊字符的匹配较弱
Chrome、Edge、Firefox 对 <datalist> 支持完善，Safari 自 12.1 起也已支持，但存在一个隐蔽问题：当 <option value> 包含开头空格、连续空格或某些 Unicode 符号时，Safari 可能无法匹配（例如输入 “a” 找不到 value=" apple"）。Chrome 和 Firefox 通常能容忍。
- 规避方法：入库前 trim
value字符串，避免首尾空白 - 不要依赖大小写敏感匹配 —— 所有浏览器都做 case-insensitive 匹配
- 移动端 iOS Safari 补全触发略延迟，属正常行为，无需 hack
真正容易被忽略的是：用户手动输入的内容不会“回写”到 <datalist>，也不会动态更新选项 —— 它是一次性静态声明，想响应式更新就得替换整个 <datalist> DOM。
