html5 的 list 属性可为 input 元素原生关联 datalist 实现下拉建议，仅需匹配 id，支持 text/search 等类型，自动前缀匹配且不强制输入，现代浏览器兼容良好，不支持时优雅降级为普通文本框。
使用 HTML5 的 list 属性，可以为 <input type="text">（或其他支持的类型）关联一个 <datalist></datalist> 元素，从而在用户输入时显示下拉式建议列表。这个功能不依赖 JavaScript，原生支持，且语义清晰。
1. 基本结构：绑定 input 和 datalist
list 属性的值必须是页面中某个 <datalist></datalist> 元素的 id。两者通过该 ID 关联：
- 给
<input>添加list="xxx" - 创建一个
<datalist id="xxx"></datalist> - 在
<datalist></datalist>内用多个<option></option>提供建议项
示例：
2. 支持的 input 类型与注意事项
list 属性仅对部分 type 有效，包括：text、search、url、tel、email、date、month、week、time、datetime-local、number、range 和 color。但实际建议效果最自然的是 text 和 search。
-
<option></option>只需value属性；label属性可选，用于显示别名（如<option value="en" label="English"></option>），但多数浏览器仅显示value -
<datalist></datalist>不会自动过滤——浏览器负责根据用户已输入内容匹配并展示相关option值（区分大小写，前缀匹配） - 用户可自由输入非列表中的内容，
<datalist></datalist>仅提供辅助，不做强制限制
3. 增强可用性的实用技巧
让建议更友好、更易维护：
- 可为
<option></option>添加data-*属性存储额外信息（如分类、ID），配合 JS 实现高级交互（例如点击后填充隐藏字段） - 动态生成
<datalist></datalist>内容时，确保 ID 不重复，且list属性值与之严格一致（注意拼写和空格） - 若建议项较多，可结合 JS 监听
input事件做异步加载，此时<datalist></datalist>作为占位或兜底方案 - 无障碍方面：屏幕阅读器通常能识别
list关联，但建议为 input 添加aria-label或<label></label>明确说明用途
4. 兼容性与降级处理
所有现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）均支持 list + <datalist></datalist>。Safari 在旧版本中支持有限（如不支持 number 类型的建议），但 text 类型兼容性良好。
- 无需 JS 即可工作，不支持时自动退化为普通文本框，无副作用
- 如需兼容极老浏览器（如 IE9 及以下），可检测
HTMLInputElement.prototype.hasOwnProperty('list')，再决定是否启用 JS 模拟下拉 - 避免在
<datalist></datalist>中放大量选项（>200 条），可能影响渲染性能
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
