Fonctionnalité de saisie semi-automatique/marquage de mise à jour de Facebook avec jQuery

Question

Je voudrais créer une entrée de texte comme la mise à jour de statut de Facebook Publisher. Fondamentalement, une entrée qui peut activer une fonctionnalité de marquage/saisie semi-automatique avec une certaine touche (ex: @), créer des tags qui agissent comme des caractères uniques dans la saisie de texte (peut être supprimé avec un seul retour arrière) . Différent de Facebook, je voudrais seulement accepter un tel "tag" et l'accepter seulement au début de l'entrée.

Il semble que l'option la plus viable à ce sujet (en utilisant jQuery) est une div contenteditable. Cependant, je ne sais pas quoi faire avec le jQuery à partir de là. Quelqu'un peut-il m'aider à démarrer? Merci.

Answer 1

un de mes amis a rencontré ce "problème" la semaine dernière. Il a fini par utiliser ce plugin qui est assez explicite:

http://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

Answer 2

Le plugin autocomplete de tokenizing dans la première réponse ne réalise pas exactement ce que la question se pose. Ce plugin vous permettra seulement de construire une liste de résultats de recherche sans texte régulier entre les deux.

Je fini par écrire ma propre solution à ce qui se trouve ici:

http://www.hawkee.com/snippet/9391/

Answer 3

Espérons que maintenant (6+ ans plus tard) vous réussi à trouver une solution existante adaptée à votre besoins, ou vous avez réussi à déployer le vôtre. Si vous ne l'avez pas fait, je me suis dit que ce qui suit serait utile pour vous, et pour ceux qui sont tombés par hasard sur cette question.

A "parler" utilitaire -management dispose de 3 composants:

1. Module Autocomplete: Le composant responsable de l'approvisionnement et l'affichage de l'ensemble des éléments qui peuvent être utilisés pour créer une mention, étant donné une chaîne .

2. Module de suivi de mentions: Composant responsable du suivi des données associées à la mention; au strict minimum, l'emplacement, ainsi que les valeurs superficielles et de fond (s'il existe) de chaque mention doivent être suivis dans toutes les modifications du texte de l'élément d'entrée auquel l'utilité est apposée.

3. Mention module de différenciation visuelle: Le composant responsable de la différenciation texte mention du reste du texte dans l'élément d'entrée à laquelle l'utilité est fixée

peu de chance que la rupture d'un tel utilitaire vous donner une idée de la façon de déployer votre propre implémentation.

Si vous préférez utiliser une implémentation robuste existante, jetez un oeil à Mentionator, qui est maintenu par ce type ici :).