list属性必须指向同页面存在的<datalist>元素ID，且大小写敏感；<option>值须用value属性，仅前缀匹配、不支持子串匹配；样式和交互无法定制，需定制时应改用其他方案。
list 属性必须指向同页面存在的
浏览器只认 list 属性值为当前文档内某个 <datalist id="xxx"> 的 id，且大小写敏感。如果 ID 不存在、拼错、或被 JS 动态移除，下拉建议会完全不出现，也不会报错——这是最常被忽略的失效原因。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<input list="suggestions">必须对应<datalist id="suggestions">，ID 不能带# - 避免用 JS 动态生成
<datalist>后再赋值list，DOM 渲染顺序可能导致建议不触发 - 多个
<input>可共用一个<datalist>，但不能跨 iframe 使用
dataList 里的 option 值必须用 value 属性，不能靠 innerText
很多人写 <option>Chrome</option> 以为能生效，结果输入“ch”没提示——<datalist> 只匹配 <option value="...">> 的 value 属性内容，innerText 被完全忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有候选值必须显式写成
<option value="Chrome"></option>，空value或仅含空格会被跳过 - 支持重复
value，但浏览器通常只显示一次；如需区分展示文本和提交值，可用<option value="chrome" label="Google Chrome"></option>，label仅影响下拉显示，不影响匹配逻辑 - 不支持嵌套 HTML，
<option value="<b>Bold</b>">会原样匹配字符串"<b>Bold</b>"，不是加粗文本
匹配行为是前缀匹配，且不区分大小写（但有例外）
用户在 <input> 中输入 “py”，会匹配 <option value="Python"> 和 <option value="pytorch">，但不会匹配 <option value="cpython">（因为不是前缀）。注意：Firefox 在某些版本中对非 ASCII 字符前缀匹配不稳定，比如中文“北”可能无法触发“北京”“北海”等选项。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想支持子串匹配？不行，原生
<datalist>不提供该能力，需换方案（如自建下拉 + JS 过滤） - 大小写问题一般不用处理，但若数据源含大小写混排（如
"API"和"api"），建议统一小写入库，靠label控制显示格式 - 输入为空时，部分浏览器（Chrome）仍会显示全部选项，部分（Safari）则不显示——不可依赖“全量展开”行为
样式控制极弱，hover / focus 状态无法用纯 CSS 定制
浏览器渲染的下拉列表是 UA Shadow DOM 内部实现，<datalist> 本身无盒模型，<option> 也无法被 CSS 选中。你不能改背景色、圆角、高亮色，也不能监听点击事件——它只是个“只读建议通道”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要尝试
option:hover { ... }或select::-webkit-listbox类伪元素，它们对<datalist>无效 - 若需定制外观或行为（比如点击后执行函数、带图标、分组），必须放弃
list+<datalist>，改用<div>+contenteditable或第三方库 - 可配合
:valid/:invalid对<input>本身做基础校验反馈，但无法约束是否选中了建议项
真正零依赖的补全，代价就是放弃控制权：你交出匹配逻辑、渲染方式、交互细节，换来的是无需 JS、无 bundle、无障碍友好、SEO 可索引。一旦需要哪怕一点点定制，就得走出这个边界。
