键入@,显示像facebook状态框这样的名单

在Facebook状态框中,如果输入“@”,则会显示朋友姓名列表。 我正在尝试实现这样一个状态框。

但问题是:

输入’@’时,’div的位置应该在哪里以及如何显示列表? 我无法做出任何改变。

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

有人在那里尽可能地阐明它吗?

我的选择是jquery。

从Facebook快速浏览一下,看来有一个

标签可以将突出显示的内容与文本内容一起呈现。

通过元素上的onKeyUp事件(透明并覆盖在具有可见内容的div顶部)上一次捕获文本一次击键并转换到

元素中。 在检查按键事件时,只需检查按键是否为“@”并触发菜单事件。

我确定Facebook使用了一个具有contenteditable的元素,因为当你输入它时,超链接会显示为内联。

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