textarea中的Twitter式自动填充功能
Mar*_*boe 46 html javascript twitter ajax jquery
我正在寻找一个Javascript自动完成实现,其中包括以下内容:
- 可以在HTML textarea中使用
- 允许在不调用自动完成的情况下键入常规文本
- 检测
@字符并在键入时启动自动填充 - 通过AJAX加载选项列表
我相信这与Twitter在推文中标记时所做的类似,但我找不到一个好的,可重用的实现.
使用jQuery的解决方案将是完美的.
谢谢.
你试过这个吗？
GITHUB:https://github.com/podio/jquery-mentions-input
DEMO/CONFIG:http://podio.github.io/jquery-mentions-input/
实现起来非常简单.
- 演示坏了。下划线导入失败并显示 404。 (2认同)
小智 6
试试这个:
(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/ 这个链接可以帮到你
- 似乎首先工作,但在我接受第一个自动完成并尝试制作第二个后,突出显示很快消失在第二个名称上.如果我在此之后尝试继续键入,则制表符停止响应并最终崩溃.(这是在Chrome中.) (2认同)
我找不到任何完全符合我要求的解决方案，所以我最终得到了以下结果：
我使用 jQuerykeypress()事件来检查用户是否按下了@字符。
如果是这种情况，将使用 jQuery UI 显示一个模式对话框。这个对话框包含一个自动完成文本字段（这里可以使用很多选项，但我推荐jQuery Tokeninput）
当用户在对话框中选择一个选项时，一个标签被添加到文本字段并关闭对话框。
这不是最优雅的解决方案，但它有效并且与我的原始设计相比不需要额外的按键。
编辑
所以基本上，我们有我们的大文本框，用户可以在其中输入文本。他应该能够“标记”用户（这只是意味着插入#<userid>文本）。我附加到 jQuery keyup 事件并检测@字符，(e.which == 64)用于显示带有文本字段的模式，用于选择要标记的用户。
解决方案的核心就是这个带有jQuery Tokeninput文本框的模态对话框。当用户在此处键入时，用户列表将通过 AJAX 加载。有关如何正确使用它，请参阅网站上的示例。当用户关闭对话框时，我将选定的 ID 插入到大文本框中。
为此，我创建了一个Meteor程序包。流星的数据模型允许使用自定义呈现列表快速进行多规则搜索。如果您不打算将Meteor用于您的Web应用程序，那么（我相信）您将无法找到任何如此出色的自动完成功能。
使用来自动填充用户@，其中在线用户以绿色显示：
在同一行中，使用元数据和引导程序图标自动完成其他操作：
叉，拉和改善：
| 归档时间： |
|
| 查看次数： |
43562 次 |
| 最近记录： |