Twitter-style de saisie semi-automatique dans le textarea

Une autre grande bibliothèque qui résout ce problème At.js

Source

Démo

Essayez ceci:

JS:

(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;
}
});
}
});

CSS:

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;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

http://jsfiddle.net/mekwall/mcWnL/52/
Ce lien vous aidera à

Je ne pouvais pas trouver une solution qui correspondait à mes attentes, j'ai donc fini avec les personnes suivantes:

J'utilise le jQuery keypress() événement à vérifier pour l'utilisateur en appuyant sur la @ caractère.

Si c'est le cas, une boîte de dialogue modale est affichée à l'aide de jQuery UI. Cette boîte de dialogue contient un champ de texte de saisie semi-automatique (de nombreuses options peuvent être utilisées ici, mais je recommander jQuery Tokeninput)

Lorsque l'utilisateur sélectionne une option dans la boîte de dialogue, un tag est ajouté au champ de texte et la boîte de dialogue est fermée.

Ce n'est pas la solution la plus élégante, mais il fonctionne, et il n'a pas besoin de plus touches par rapport à ma conception originale.

Modifier

Donc, fondamentalement, nous avons notre grande zone de texte où l'utilisateur peut saisir du texte. Il doit être capable de "balise" d'un utilisateur (ce qui signifie simplement d'insérer #<userid> dans le texte). - Je joindre à la jQuery événement keyup et de détecter les @ caractère à l'aide de (e.which == 64) de montrer un modal avec un champ de texte pour sélectionner les utilisateurs de marquer.

De la viande de la solution est tout simplement de cette boîte de dialogue modale avec un jQuery Tokeninput zone de texte. Que l'utilisateur tape ici, la liste des utilisateurs est chargé via AJAX. Voir les exemples sur le site pour savoir comment l'utiliser correctement. Lorsque l'utilisateur ferme la boîte de dialogue, j'ai insérer la IDs dans la grande zone de texte.

Un autre plugin qui fournit une fonctionnalité similaire:

AutoSuggest

Vous pouvez l'utiliser avec la coutume des déclencheurs ou vous pouvez l'utiliser sans aucun déclencheurs. Fonctionne avec des champs de saisie, ces zones de texte et contenteditables. Et jQuery n'est pas une dépendance.

CETTE devrait fonctionner. En ce qui concerne l' @ coups de pied hors de la recherche, il suffit d'ajouter (de manière dynamique ou pas) le symbole au début de chaque terme de recherche.