HTML5的autocomplete属性仅是语义标记，不提供输入提示数据，无法主动拉取、控制或定制下拉提示项；真正可控的提示必须用JavaScript实现。
HTML5 的 autocomplete 属性本身**不提供输入提示数据**，它只是告诉浏览器“这个字段可能填什么类型的内容”，由浏览器决定是否展示历史值或密码管理器建议——你无法用它主动拉取、控制或定制下拉提示项。
autocomplete 只是语义标记，不是 API
很多人误以为设了 autocomplete="name" 就能触发姓名联想，其实这只是给浏览器一个提示：「这里大概率要填姓名」。浏览器是否响应、响应什么内容、怎么渲染，完全不可控。
- Chrome 可能弹出已保存的姓名，也可能啥也不弹（比如在隐身模式或禁用了自动填充）
- Safari 对
autocomplete值校验更严格，填错值（如autocomplete="full-name"）会直接忽略 - Firefox 不支持部分新值（如
organization-title），回退为无行为 - 移动端键盘可能因此切换为邮箱/电话专用布局，但和“提示列表”无关
真正可控的输入提示必须用 JavaScript 实现
要实现带搜索、过滤、点击选中的输入提示（即常说的 autocomplete 下拉框），必须自己监听 input 事件 + 渲染 DOM + 管理焦点，或者用成熟方案：
- 原生方案：监听
input，用fetch()查接口，动态生成<ul>+<li>列表并绝对定位覆盖 - 轻量库：
awesomplete（纯 JS，无依赖）、tom-select（可远程加载） - 框架绑定：Vue 的
v-autocomplete（Vuetify）、React 的react-autocomplete - 注意：别混用
autocomplete="off"和自研提示——它会禁用浏览器默认填充，但不影响你自己的 JS 下拉
autocomplete 常见值与实际效果差异
下面这些值虽被 HTML5 规范定义，但浏览器实现程度不一，且**都不返回结构化数据供 JS 调用**：
立即学习“前端免费学习笔记（深入）”；
autocomplete="email" → 可能唤出邮箱键盘，或显示最近用过的邮箱地址（仅限浏览器本地记录） autocomplete="tel" → 可能唤出数字键盘，不触发任何提示下拉 autocomplete="street-address" → Chrome 可能填整条地址，但不会分项提示“街道/门牌号” autocomplete="bday" → 无提示下拉，仅可能在表单提交时帮格式校验
所有这些行为都不可编程拦截、修改或监听选择事件——你拿不到用户到底点了哪个历史项。
为什么排比式写法在这里反而误导人
像“取数据、配属性、绑事件、显列表”这类排比，容易让人以为 autocomplete 是一个可拆解的流程环节。实际上它只是单向语义标签，既不“取”、也不“配”、更不“显”。真正的提示逻辑必须绕过它另起炉灶。
最常被忽略的一点：服务端接口返回的提示项如果含 HTML 字符（如 &、<），直接 innerHTML 渲染会 XSS；而用 textContent 又丢失高亮。这个细节，比纠结 autocomplete 值重要得多。
