Javascript Twitter风格的文本区自动完成

我正在寻找一个Javascript自动完成实现，它包括以下内容：

• 可以在HTML文本区域中使用
• 允许在不调用自动完成的情况下键入常规文本
• 检测

  @

  字符并在键入时启动自动完成
• 通过AJAX加载选项列表

我相信这与Twitter在tweet中添加标签时所做的类似，但我找不到一个好的、可重用的实现。
使用jQuery的解决方案将是完美的

---

谢谢。

应该有用。关于@kicking the search，只需在每个可能的搜索词的开头添加（动态或非动态）符号。

我找不到任何完全符合我要求的解决方案，因此我最终得出以下结论：

我使用jQuery

keypress（）

事件检查用户是否按了

@

字符。
如果是这种情况，将使用jqueryui显示一个模式对话框。此对话框包含一个自动完成文本字段（此处可以使用许多选项，但我建议使用）
当用户在对话框中选择一个选项时，将向文本字段添加一个标记，并关闭对话框

这不是最优雅的解决方案，但与我最初的设计相比，它可以工作，并且不需要额外的按键

编辑
基本上，我们有一个大的文本框，用户可以在其中输入文本。他应该能够“标记”用户（这仅仅意味着在文本中插入

#

）。我附加到jquerykeyup事件，并使用

（e.which==64）

检测

@

字符，以显示一个带有文本字段的模式，用于选择要标记的用户

解决方案的核心就是这个带有文本框的模式对话框。当用户在这里输入时，通过AJAX加载用户列表。有关如何正确使用它，请参见网站上的示例。当用户关闭对话框时，我将所选ID插入大文本框。

尝试以下操作：

（函数（$）{
$.widget（“ui.tagging”{
//默认选项
选项：{
资料来源：[]，
maxItemDisplay:3，
自动调整大小：正确，
动画大小：false，
动画教育：50
},
_创建：函数（）{
var self=这个；
this.activeSearch=false；
此.searchTerm=“”；
this.beginfom=0；
this.wrapper=$（“”）
.addClass（“ui标签包装”）；
this.highlight=$（“”）；
this.highlightWrapper=$（“”）
.addClass（“ui角全部”）；
this.highlightContainer=$（“”）
.addClass（“ui标记突出显示”）
.append（this.highlight）；
this.meta=$（“”）
.attr（“类型”、“隐藏”）
.addClass（“ui标记元”）；
this.container=$（“”）
.width（此.element.width（））
.insertBefore（此.element）
.addClass（“ui标记”）
.附加(
这是highlightContainer，
this.element.wrap（this.wrapper）.parent（），
这是梅塔
);
var initialHeight=this.element.height（）；
this.element.height（this.element.css（'lineHeight'））；
此.element.keypress（功能（e）{
//激活@
if（e.which==64&&！self.activeSearch）{
self.activeSearch=true；
self.beginfom=e.target.selectionStart+1；
}
//在太空中停用
if（e.which==32&&self.activeSearch）{
self.activeSearch=false；
}
}).bind（“扩展键向上键向下更改”，函数（e）{
var cur=self.highlight.find（“span”），
val=self.element.val（），
prevHeight=self.element.height（），
rowHeight=self.element.css（'lineHeight'），
newHeight=0；
当前每个（功能（i）{
var s=$（本）；
val=val.replace（s.text（），$（“”）。append（s.html（））；
});
self.highlight.html（val）；
newHeight=self.element.height（行高）[0]。滚动高度；
自身元素高度（prevHeight）；
如果（新高度<初始高度）{
newHeight=初始高度；
}
if（！$.browser.mozilla）{
if（self.element.css（'paddingBottom'）| | self.element.css（'paddingTop'））{
var padInt=
parseInt（self.element.css（'paddingBottom'）.replace（'px'，''）+
parseInt（self.element.css（'paddingTop'）.replace（'px'，''）；
newHeight-=padInt；
}
}
self.options.animateResize？
self.element.stop（真，真）。设置动画({
高度：新高度
}，self.options.animateduation）：
self.element.height（新高度）；
var widget=self.element.autocomplete（“widget”）；
小部件位置({
我的：“左上”，
在“左下角”，
自动集装箱