<datalist> 通过 list 属性关联 <input>，浏览器原生支持前缀模糊匹配，无需 JS；需确保 list 值与 datalist 的 id 完全一致，<option> 提供候选值，支持 label，但不强制唯一、无事件监听、不支持正则或禁用状态。
使用 <datalist> 为 <input> 添加自动补全建议，核心是通过 list 属性关联输入框与预定义选项列表，浏览器原生支持、无需 JavaScript 即可实现轻量级提示。
基础用法：绑定 input 和 datalist
关键在于 <input> 的 list 属性值必须与 <datalist> 的 id 完全一致：
- 给
<datalist>设置一个id（如id="browsers"） - 在对应
<input>上添加list="browsers" -
<option>子元素提供候选值，支持重复、无序、不强制唯一
示例：
<input list="os-list" placeholder="输入操作系统..."><datalist id="os-list">
<option value="Windows">
<option value="macOS">
<option value="Linux">
<option value="Ubuntu">
</datalist>
提升实用性：支持模糊匹配与部分输入触发
浏览器默认对 <option value> 进行**前缀匹配**（即用户输入“Win”，会匹配“Windows”；但输入“dows”通常不显示）。注意：
立即学习“前端免费学习笔记（深入）”；
- 不区分大小写（多数浏览器行为）
- 不支持正则或自定义匹配逻辑（这是原生限制，需 JS 扩展）
- 若想支持中文拼音首字母或模糊检索，必须配合 JavaScript 实现
- 可为
<option>添加label属性，用于显示说明（如<option value="py" label="Python">），部分浏览器会在下拉中显示 label 文本
兼容性与注意事项
<datalist> 在所有现代浏览器（Chrome、Firefox、Edge、Safari 12.1+）中均受支持，但有几点易忽略：
- 它只是“建议”，用户仍可输入任意内容，不会强制选择选项
- 没有事件（如
onselect）直接监听选中动作，需监听input或change并判断值是否在列表中 - Safari 对
label属性支持较晚，旧版可能只显示value - 不支持禁用状态（
disabled）或分组（<optgroup>），这些需自行封装组件
进阶小技巧：动态填充 + 简单校验
虽不能纯 HTML 动态更新 <datalist>，但可用少量 JS 增强体验：
- 根据用户已输内容，用 JS 动态修改
<datalist>内的<option>（例如过滤城市列表） - 结合
input.validity.badInput或自定义验证，在提交前检查值是否属于推荐范围 - 搭配
autocomplete="off"可避免浏览器地址栏/密码管理器干扰（但不要滥用，影响无障碍）
不复杂但容易忽略：始终确保 list 和 id 拼写一致、大小写敏感，这是最常见的失效原因。
