AI表单推荐非HTML原生能力，需通过JavaScript调用外部模型服务实现；可用datalist+input实现轻量推荐，或调用API做真AI推荐，须控制触发时机、状态管理和防竞态，并避免autocomplete="off"误禁datalist。
AI 表单推荐不是 HTML 原生能力
HTML 表单本身不支持 AI 推荐，form、input、select 这些标签没有内置 AI 接口或语义理解能力。所谓“AI 表单推荐”，本质是前端调用外部模型服务（如本地轻量模型、API 接口）对用户输入做实时预测，并动态更新 input 的 list、placeholder 或下拉选项。浏览器不会自动“变聪明”，得你主动喂数据、写逻辑、接服务。
用 datalist + JavaScript 实现基础推荐效果
这是最轻量、兼容性最好（IE10+）、无需后端的方案，适合静态候选集或缓存化推荐。核心是把预测结果塞进 datalist，再绑定到 input。
- 必须给
input设置list属性，值为datalist的id，否则不生效 -
datalist里的option只能是静态value，不能带描述或权重；想显示“张三（北京｜技术总监）”，得拼成字符串塞进value - 推荐逻辑要监听
input的input事件（不是change），且加防抖，否则每敲一个字都查一次，卡顿明显 - 示例：
<input list="ai-suggestions" id="search"><datalist id="ai-suggestions"><option value="React"><option value="Vue"></datalist>
调用 API 做真 AI 推荐时的三个关键控制点
当推荐依赖后端模型（比如调 /api/suggest?query=py），前端不能只管发请求，得处理好时机、状态和降级。
- 触发时机：别等用户输完才查——建议在输入 ≥2 字且停止输入 ≥300ms 后发起请求；过短（如 1 字）容易返回噪声，过长（如 500ms）响应滞后
- 状态管理：必须显式处理
loading（禁用输入/显示 spinner）、error（恢复默认提示或 fallback 词库）、empty（清空datalist，避免残留旧选项） - 防竞态：用户快速输入“python” → “pytorch” → “pydantic”，要 abort 前两个未完成的
fetch，否则旧响应覆盖新结果；可用AbortController控制
为什么不用 autocomplete="off"？它和 AI 推荐冲突
很多开发者随手加 autocomplete="off" 想屏蔽浏览器自带下拉，结果也干掉了自己注入的 datalist 推荐。这个属性实际作用是禁用**所有**自动补全行为，包括 datalist。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是移除
autocomplete属性，或设为autocomplete="on"（默认值） - 若真要禁掉浏览器历史记录补全但保留
datalist，可改用autocomplete="new-password"（hack 但有效），或给input加随机name值（如name="search_12345"）骗过浏览器记忆 - Chrome 88+ 对
autocomplete="off"更严格，即使写了也可能被忽略——不如直接不用
datalist，而是判断什么时候该推、推什么、推错了怎么不打断用户。模型输出不稳定、网络延迟、输入节奏变化快，这些都会让“推荐”变成干扰。先从缓存关键词 + datalist 跑通流程，再逐步接入 API 和打分逻辑。 
