HTML无原生灵感标签智能推荐功能，需JavaScript结合DOM操作与数据源实现；常见错误包括autocomplete无效、datalist仅支持前缀匹配、Enter直接提交等；推荐用contenteditable div替代input，配合防抖、缓存、结构化标签节点及同步JS数据状态来保障一致性。
HTML里没有原生的“灵感标签智能推荐”功能
浏览器的 元素本身不提供标签联想、去重、多选或语义化推荐能力。所谓“智能推荐”，全靠 JavaScript 配合 DOM 操作 + 数据源（本地数组或 API）实现，HTML 只负责搭架子。
常见错误现象：autocomplete="tags" 无效、list 属性只能做静态匹配、用户输错字就完全断联、回车直接提交表单而不是添加标签。
- 用
datalist+只能做前缀匹配，不支持模糊搜索、不支持多值、无法阻止默认提交 - 把标签当普通文本塞进
，后续解析易出错（比如用户输逗号、空格、中文顿号） - 没拦截
Enter或Blur，导致标签未确认就丢失
用 contenteditable + div 替代 input 更可控
真要做多标签输入+实时推荐，放弃纯 是更稳妥的选择。核心逻辑是：让用户在可编辑区域打字 → 监听输入 → 匹配候选 → 点击/回车插入带删除按钮的标签节点。
使用场景：内容后台的分类标签、文章关键词、协作工具的任务成员选择。
- 用
div[contenteditable="true"]捕获原始输入，避免表单默认行为干扰 - 推荐列表用绝对定位
- 每个候选项绑定
data-value，点击时插入结构化React - 输入中按
Space、Enter、Comma触发标签提交，不是所有键都该响应
fetch() 动态加载标签建议时要注意防抖和缓存
如果推荐数据来自后端（比如搜索已有标签），不做限制会频繁发请求、卡 UI、暴露用户输入意图。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
性能影响：每敲一个字都 fetch，10 次输入可能触发 10 次网络请求，且后 9 次结果大概率被丢弃。
- 用
setTimeout+clearTimeout实现 300ms 防抖，只在用户停顿时查 - 对相同 query 缓存最近一次响应（
Map存query → Promise），避免重复请求 - 接口返回字段必须包含
id和label，前端别自己拼字符串渲染，防止 XSS - 加 loading 状态，但不要禁用输入框——用户可能想改词，不是等你转圈
标签删除和提交时的数据格式最容易出错
前端显示一堆带 × 的标签很轻松，但真正提交时，后端要的是干净数组，比如 ["react", "typescript", "webpack"]，而不是 HTML 字符串或一堆 data-id。
容易踩的坑：form.addEventListener("submit") 里直接取 div.innerHTML，结果拿到的是带 和按钮的垃圾；或者用 querySelectorAll(".tag") 却忘了过滤掉正在输入的临时文本节点。
- 维护一个 JS 数组
currentTags = []，每次新增/删除都同步更新它 - 提交前把
currentTags.map(tag => tag.value)赋给隐藏的value，用 JSON.stringify 也行，看后端约定 - 删除标签时用事件委托监听
.tag button，别给每个按钮单独绑事件 - 用户粘贴一串文字（如 “vue, svelte, nextjs”）进来，得用正则切分并去首尾空格，再逐个校验是否已存在
真正的难点不在怎么显示推荐，而在于输入状态、DOM 节点、JS 数据三者始终对齐。稍有松动，就会出现“界面上删了，提交时还在”或者“输了一半推荐没了”的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
