textarea不支持autocomplete下拉提示，因浏览器忽略其list属性；可行方案是用contenteditable div+自定义浮窗，或改用动态高度的input+datalist。
HTML原生的 <textarea> 标签**不支持自动完成（autocomplete）下拉提示浮窗**，这是关键前提。它没有像 <input type="text"> 那样内置的 `list` 属性或浏览器级建议菜单机制。
为什么 textarea 不能直接用 datalist
虽然你可以尝试给 <textarea> 添加 list 属性并关联 <datalist>，但**所有主流浏览器（Chrome/Firefox/Safari）均忽略该组合**——datalist 只对部分 <input> 类型生效（如 text、search、url 等），不适用于 textarea。
替代方案：用 contenteditable + 自定义下拉菜单
要实现类似“输入时弹出关键词建议浮窗”的效果，实际可行的做法是：用 div[contenteditable="true"] 模拟文本域，并手动监听输入、匹配关键词、定位并显示浮动的 <ul> 或 <div> 提示框。
- 监听
input或keydown事件，提取光标前的当前词（例如正则匹配/\b\w*$/） - 根据输入内容过滤预设关键词列表，生成匹配项
- 用
getBoundingClientRect()获取光标位置（需配合document.getSelection().getRangeAt(0)），动态设置下拉框top和left - 点击或回车选择后，替换当前词并聚焦回编辑区
更轻量的选择：改用 input + 动态高度
如果业务场景允许，推荐用 <input type="text"> 配合 datalist 实现原生自动完成，再通过 JS 动态调整高度模拟多行（例如监听 input 事件，用 scrollHeight 设置 style.height）：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
<input list="suggestions" id="auto-input"> <datalist id="suggestions"> <option value="Apple"> <option value="Android"> </datalist>
这样既保留原生体验，又避免复杂 DOM 操作和光标定位问题。
现成库参考（减少重复开发）
若项目需要成熟方案，可考虑：
- At.js：专为 mention / autocomplete 设计，支持 contenteditable 元素
- Textarea Autocomplete（npm 包）：轻量级，基于 textarea 的光标位置解析
- CodeMirror / Monaco Editor：重型但功能完整，自带 suggestion widget
不复杂但容易忽略：核心难点不在“显示下拉”，而在于**精准获取光标坐标、实时更新匹配、以及插入后保持光标位置正确**——这些细节决定体验是否自然。
