键入@，显示一个类似于facebook状态框的姓名列表

type @, show a name list like facebook status box

本文关键字：状态 facebook 列表类似于一个显示键入更新时间：2023-09-26

在facebook状态框中，如果您键入"@"，则会显示朋友的姓名列表。我正试图实现这样一个状态框。

但问题是：

在键入"@"时，"div"的位置应该在哪里，以及如何显示列表？我就是什么都做不出来。

我讨论了SOF的这个问题，但这实际上并没有讨论这个问题。

有人在那里尽可能多地阐明这一点吗？

我的选择是jquery。

快速浏览一下facebook，就会发现有一个<div>标记，它将突出显示的内容与文本内容一起呈现。

文本通过<textarea>元素上的onKeyUp事件（透明并覆盖在具有可见内容的div顶部）一次捕获一次按键，并转换到<div>元素中。在检查按键事件时，只需检查按键是否为"@"并启动菜单事件。

我确信Facebook在contenteditable中使用了一个元素，因为当你键入超链接时，它会内联显示。

或者，如果您不想格式化名称，可以创建一个具有完全相同字体CSS属性的新元素，测量偏移量，并使下拉元素显示在与textarea相同的偏移量处。