HTML5的标签提供原生自动完成功能，需通过list属性关联id匹配的，支持前缀/子串匹配选项，兼容主流现代浏览器但不支持IE9及以下，且无法强制选择或深度定制样式。
HTML5 的 <datalist></datalist> 标签能为文本输入框提供原生、轻量的自动完成下拉提示，无需 JavaScript 就可实现基础建议功能。它本质是一个预定义选项容器，需通过 list 属性与 <input> 关联，浏览器会自动匹配用户输入并显示匹配项（注意：不强制选择，也不过滤——匹配逻辑由浏览器控制）。
1. 基础结构：绑定 input 和 datalist
关键点是让 <input> 的 list 属性值，等于 <datalist></datalist> 的 id。两者必须在同一文档中：
<input type="text" list="browsers" placeholder="输入浏览器名称..."> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> <option value="Opera"> </datalist>
用户输入时，浏览器会在输入框下方显示包含已输入字符的 value 项（如输“ch”，会提示 Chrome；输“f”，提示 Firefox）。
2. 提升实用性：添加 label 说明和部分匹配支持
<option></option> 可带 label 属性，用于显示描述性文字（不影响实际提交值）：
立即学习“前端免费学习笔记（深入）”；
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
<datalist id="cities"> <option value="Beijing" label="中国·北京"> <option value="Shanghai" label="中国·上海"> <option value="Tokyo" label="日本·东京"> <option value="Seoul" label="韩国·首尔"> </datalist>
注意：<datalist></datalist> 本身不支持模糊搜索或拼音匹配，只做**前缀/子串匹配**（具体行为因浏览器而异）。若需更智能提示（如拼音、高亮、远程数据），需配合 JavaScript 实现。
3. 注意事项与常见问题
使用时需留意以下限制和兼容细节：
- 仅适用于
type="text"、"search"、"url"、"tel"、"email"、"date"等部分 input 类型（type="number"多数浏览器不支持） - IE 9 及更早版本不支持；Edge 12+、Chrome 20+、Firefox 4+、Safari 12.1+ 支持良好
- 用户可自由输入任意内容，不会被限制在列表中——
<datalist></datalist>是“建议”而非“约束” - 无法用 CSS 精确样式化下拉菜单（浏览器原生控件，仅可通过
::-webkit-list-box等私有伪元素有限调整）
4. 进阶提示：结合 JS 做简单增强
若需动态加载选项或响应输入变化，可配合 JS 操作 <datalist></datalist> 内容：
const input = document.querySelector('input[list]');
const list = document.getElementById(input.list);
// 清空并添加新选项
list.innerHTML = '';
['React', 'Vue', 'Angular', 'Svelte'].forEach(val => {
const opt = document.createElement('option');
opt.value = val;
list.appendChild(opt);
});
但注意：修改 <datalist></datalist> 后，浏览器不会自动重新触发匹配，通常需用户再次聚焦或输入才会更新提示。
不复杂但容易忽略：确保 list 和 id 完全一致（区分大小写），且 <datalist></datalist> 在 DOM 中存在——否则提示完全不出现。
