テキストエリアでのTwitterスタイルのオートコンプリート
次を含むJavascriptオートコンプリートの実装を探しています。
- HTMLテキストエリアで使用できます
- オートコンプリートを呼び出さずに通常のテキストを入力できます
@文字を検出し、入力時にオートコンプリートを開始します- AJAXを介してオプションのリストをロードします
これは、Twitterがツイートにタグ付けするときに行うことと似ていると思いますが、再利用可能なニースの実装は見つかりません。
jQueryを使用したソリューションは完璧です。
ありがとう。
要件に完全に一致するソリューションが見つからなかったため、次のようになりました。
JQuery keypress()イベントを使用して、@文字を押しているユーザーを確認します。
この場合、jQuery UIを使用してモーダルダイアログが表示されます。このダイアログにはオートコンプリートテキストフィールドが含まれます（ここでは多くのオプションを使用できますが、 jQuery Tokeninput をお勧めします）
ユーザーがダイアログでオプションを選択すると、テキストフィールドにタグが追加され、ダイアログが閉じます。
これは最もエレガントなソリューションではありませんが、機能し、元のデザインに比べて余分なキーを押す必要はありません。
編集
したがって、基本的に、ユーザーがテキストを入力できる大きなテキストボックスがあります。彼はユーザーに「タグ付け」できるはずです（これは単にテキストに#<userid>を挿入することを意味します）。 jQueryキーアップイベントにアタッチし、@を使用して(e.which == 64)文字を検出し、タグ付けするユーザーを選択するためのテキストフィールドを持つモーダルを表示します。
ソリューションの要点は、 jQuery Tokeninput テキストボックスを備えたこのモーダルダイアログです。ユーザーがここに入力すると、ユーザーのリストがAJAXを介してロードされます。適切に使用する方法については、Webサイトの例を参照してください。ユーザーがダイアログを閉じると、選択したIDを大きなテキストボックスに挿入します。
私はあなたの問題が解決されて以来長いと確信していますが、 jquery-textcomplete はそれが仕事をするように見えます。
これを試しましたか
GITHUB： https://github.com/podio/jquery-mentions-input
DEMO/CONFIG： http://podio.github.io/jquery-mentions-input/
実装は非常に簡単です。
これを試して：
(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/ このリンクは役立ちます
この目的で Meteor パッケージを作成しました。 Meteorのデータモデルにより、カスタムレンダリングリストを使用した高速マルチルール検索が可能になります。 WebアプリにMeteorを使用していない場合（残念ながら）、オートコンプリートにこれほど素晴らしいものは見つかりません。
オンラインユーザーが緑色で表示される@でユーザーを自動補完します。
同じ行で、メタデータとbootstrap=アイコンで他の何かを自動補完します：
フォーク、プル、改善：
同様の機能を提供する別のプラグイン：
カスタムトリガーで使用することも、トリガーなしで使用することもできます。入力フィールド、テキストエリア、およびコンテンツ編集可能ファイルで動作します。また、jQueryは依存関係ではありません。
この小さな拡張子は、少なくともプレゼンテーションでは、求められたものに最も近いようです。小さいので、簡単に理解して変更できます。 http://lookapanda.github.io/jquery-hashtags/