我正在寻找一个 Javascript 自动完成实现，其中包括以下内容：
@ 字符并在键入时开始自动完成我相信这类似于 Twitter 在推文中添加标签时所做的事情，但我找不到一个好的、可重用的实现。
使用 jQuery 的解决方案将是完美的。
谢谢。
【问题讨论】：
标签： javascript jquery html ajax twitter
THIS 应该可以工作。关于启动搜索的 @，只需将符号（动态或非动态）添加到每个可能的搜索词的开头即可。
【讨论】：
我找不到任何完全符合我要求的解决方案，所以我最终得到了以下结果：
我使用 jQuery keypress() 事件来检查用户是否按下了@ 字符。
如果是这种情况，将使用 jQuery UI 显示一个模式对话框。此对话框包含一个自动完成文本字段（此处可以使用许多选项，但我推荐 jQuery Tokeninput）
当用户在对话框中选择一个选项时，会在文本字段中添加一个标签并关闭对话框。
这不是最优雅的解决方案，但与我的原始设计相比，它可以工作并且不需要额外的按键。
编辑
所以基本上，我们有一个大文本框，用户可以在其中输入文本。他应该能够“标记”用户（这只是意味着在文本中插入#<userid>）。我附加到 jQuery keyup 事件并使用 (e.which == 64) 检测 @ 字符以显示带有文本字段的模式，用于选择要标记的用户。
解决方案的核心就是这个带有jQuery Tokeninput 文本框的模态对话框。当用户在此处键入时，用户列表通过 AJAX 加载。请参阅网站上的示例以了解如何正确使用它。当用户关闭对话框时，我将选定的 ID 插入到大文本框中。
【讨论】：
试试这个：
(function($){
$.widget("ui.tagging", {
// default options
options: {
source: [],
maxItemDisplay: 3,
autosize: true,
animateResize: false,
animateDuration: 50
},
_create: function() {
var self = this;
this.activeSearch = false;
this.searchTerm = "";
this.beginFrom = 0;
this.wrapper = $("<div>")
.addClass("ui-tagging-wrap");
this.highlight = $("<div></div>");
this.highlightWrapper = $("<span></span>")
.addClass("ui-corner-all");
this.highlightContainer = $("<div>")
.addClass("ui-tagging-highlight")
.append(this.highlight);
this.meta = $("<input>")
.attr("type", "hidden")
.addClass("ui-tagging-meta");
this.container = $("<div></div>")
.width(this.element.width())
.insertBefore(this.element)
.addClass("ui-tagging")
.append(
this.highlightContainer,
this.element.wrap(this.wrapper).parent(),
this.meta
);
var initialHeight = this.element.height();
this.element.height(this.element.css('lineHeight'));
this.element.keypress(function(e) {
// activate on @
if (e.which == 64 && !self.activeSearch) {
self.activeSearch = true;
self.beginFrom = e.target.selectionStart + 1;
}
// deactivate on space
if (e.which == 32 && self.activeSearch) {
self.activeSearch = false;
}
}).bind("expand keyup keydown change", function(e) {
var cur = self.highlight.find("span"),
val = self.element.val(),
prevHeight = self.element.height(),
rowHeight = self.element.css('lineHeight'),
newHeight = 0;
cur.each(function(i) {
var s = $(this);
val = val.replace(s.text(), $("<div>").append(s).html());
});
self.highlight.html(val);
newHeight = self.element.height(rowHeight)[0].scrollHeight;
self.element.height(prevHeight);
if (newHeight < initialHeight) {
newHeight = initialHeight;
}
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(true, true).animate({
height: newHeight
}, self.options.animateDuration) :
self.element.height(newHeight);
var widget = self.element.autocomplete("widget");
widget.position({
my: "left top",
at: "left bottom",
of: self.container
}).width(self.container.width()-4);
}).autocomplete({
minLength: 0,
delay: 0,
maxDisplay: this.options.maxItemDisplay,
open: function(event, ui) {
var widget = $(this).autocomplete("widget");
widget.position({
my: "left top",
at: "left bottom",
of: self.container
}).width(self.container.width()-4);
},
source: function(request, response) {
if (self.activeSearch) {
self.searchTerm = request.term.substring(self.beginFrom);
if (request.term.substring(self.beginFrom - 1, self.beginFrom) != "@") {
self.activeSearch = false;
self.beginFrom = 0;
self.searchTerm = "";
}
if (self.searchTerm != "") {
if ($.type(self.options.source) == "function") {
self.options.source(request, response);
} else {
var re = new RegExp("^" + escape(self.searchTerm) + ".+", "i");
var matches = [];
$.each(self.options.source, function() {
if (this.label.match(re)) {
matches.push(this);
}
});
response(matches);
}
}
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
self.activeSearch = false;
//console.log("@"+searchTerm, ui.item.label);
this.value = this.value.replace("@" + self.searchTerm, ui.item.label) + ' ';
self.highlight.html(
self.highlight.html()
.replace("@" + self.searchTerm,
$("<div>").append(
self.highlightWrapper
.text(ui.item.label)
.clone()
).html()+' ')
);
self.meta.val((self.meta.val() + " @[" + ui.item.value + ":]").trim());
return false;
}
});
}
});body, html {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}
.ui-tagging {
position: relative;
border: 1px solid #B4BBCD;
height: auto;
}
.ui-tagging .ui-tagging-highlight {
position: absolute;
padding: 5px;
overflow: hidden;
}
.ui-tagging .ui-tagging-highlight div {
color: transparent;
font-size: 13px;
line-height: 18px;
white-space: pre-wrap;
}
.ui-tagging .ui-tagging-wrap {
position: relative;
padding: 5px;
overflow: hidden;
zoom: 1;
border: 0;
}
.ui-tagging div > span {
background-color: #D8DFEA;
font-weight: normal !important;
}
.ui-tagging textarea {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: transparent;
border-width: 0;
font-size: 13px;
height: 18px;
outline: none;
resize: none;
vertical-align: top;
width: 100%;
line-height: 18px;
overflow: hidden;
}
.ui-autocomplete {
font-size: 13px;
background-color: white;
border: 1px solid black;
margin-bottom: -5px;
width: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>http://jsfiddle.net/mekwall/mcWnL/52/ 此链接将对您有所帮助
【讨论】：
最近我不得不面对这个问题，这就是我确定的方式......
这适用于所有最新的浏览器。没有在旧的测试过
这里是Working bin
【讨论】：
为此，我创建了一个Meteor 包。 Meteor 的数据模型允许使用自定义渲染列表进行快速多规则搜索。如果您没有将 Meteor 用于您的 Web 应用程序，（我相信）很遗憾，您不会发现任何用于自动完成的出色功能。
使用@自动完成用户，在线用户显示为绿色：
在同一行中，使用元数据和引导图标自动完成其他内容：
分叉、拉取和改进：
【讨论】：
我确定您的问题早已解决，但 jquery-textcomplete 看起来可以解决问题。
【讨论】：
【讨论】：
你试过了吗
GITHUB：https://github.com/podio/jquery-mentions-input
演示/配置：http://podio.github.io/jquery-mentions-input/
实现起来非常简单。
【讨论】：
这个小扩展似乎至少在演示中与所要求的内容最接近。因为它很小，所以很容易理解和修改。 http://lookapanda.github.io/jquery-hashtags/
【讨论】：
另一个提供类似功能的插件：
您可以将它与自定义触发器一起使用，也可以在不使用任何触发器的情况下使用它。适用于输入字段、文本区域和 contenteditables。并且 jQuery 不是依赖项。
【讨论】：