需绑定的list属性才能生效，仅支持前缀匹配且限于部分type，动态填充须先确保dom挂载，不支持分组、禁用项、自定义样式及模糊搜索，复杂需求应改用js库。
用 <datalist></datalist> 配合 <input> 实现原生候选列表
HTML 原生支持数据候选列表，核心是 <datalist></datalist> 元素，它本身不渲染，必须通过 list 属性绑定到一个 <input> 上才能生效。浏览器会自动在输入时下拉显示匹配的 <option></option>。
常见错误是直接把 <datalist></datalist> 当成下拉控件用，或忘记给 <input> 设置 list 属性（值必须和 <datalist></datalist> 的 id 完全一致）。
<input list="browsers"><datalist id="browsers"><option value="Chrome"></option> <option value="Firefox"></option></datalist>- 只对
type="text"、"search"、"url"、"tel"、"email"、"date"等部分类型生效；type="number"或"hidden"不支持 - 匹配逻辑由浏览器实现，仅做**前缀匹配**（如输 “ch” 会匹配 “Chrome”，但输 “rome” 不会）
动态填充 <datalist></datalist> 时注意 DOM 更新时机
如果候选数据来自 JS（比如 API 请求后生成），不能只操作 <datalist></datalist> 内部的 <option></option>，还要确保 <input> 已挂载且 list 属性指向有效 id。否则部分浏览器（尤其是 Safari）可能忽略后续插入的 <option></option>。
- 推荐先写好空的
<datalist id="xxx"></datalist>和带list="xxx"的<input>，再用 JS 批量append()<option></option> - 避免用
innerHTML = "..."替换整个<datalist></datalist>—— 这会中断浏览器对候选列表的引用关系 - 若需清空重填，先
datalist.innerHTML = ""，再逐个appendChild(option)
<datalist></datalist> 不支持分组、禁用项或自定义样式
原生 <datalist></datalist> 的 UI 完全由浏览器控制，无法添加 <optgroup></optgroup>、设置 disabled 属性，也不能用 CSS 选择下拉面板（没有对应伪类）。如果你需要这些能力，说明它已超出原生能力边界。
- 所有
<option></option>都可被选中，无灰显/禁用状态 - 不支持 placeholder 式的提示文字（
<option></option>的label属性仅用于显示，不影响值） - 移动端兼容性尚可，但 iOS Safari 对长列表滚动支持较弱，易截断
替代方案：何时该放弃 <datalist></datalist> 改用 JS 库
当需求出现以下任一情况时，硬套 <datalist></datalist> 反而增加调试成本：需要模糊匹配（非前缀）、异步搜索、键盘导航高亮、远程去重、服务端分页、或与表单验证深度集成。
- 轻量级场景可用
autocomplete="off"+ 自研keydown+div下拉层，控制力更强 - 主流框架（React/Vue）有成熟组件如
react-select或@headlessui/react的Combobox，内置防抖、焦点管理、A11Y 支持 - 注意：任何自实现方案都需手动处理
aria-expanded、aria-activedescendant等可访问性属性，否则屏幕阅读器无法识别
<datalist></datalist> 只认你写的 value 字符串，且只从前开始比。要不要支持拼音、别名、大小写不敏感，得自己加 JS 层。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
