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