2 votes

Boîte de texte de mise à jour de statut jQuery + Facebook - Liens vers les profils en mode autocomplétion

J'ai un site web de réseautage social avec une zone de texte de mise à jour de statut, un peu comme sur Facebook. Cependant, j'aimerais aussi que l'utilisateur puisse taper le symbole @ pendant qu'il tape un nouveau statut, ce qui fait apparaître une option d'autocomplétion des profils d'amis (comme sur Facebook).

Lorsque l'utilisateur en sélectionne une, celle-ci doit être incluse dans le statut sous la forme d'un lien vers le profil de la personne concernée.

J'ai vu les nombreux plugins d'autocomplétion pour jquery, y compris le plugin fcbkComplete, mais ils ne vous permettent de choisir que des éléments à partir des données JSON, et non d'inclure votre propre texte.

Par exemple, je peux vouloir taper : "J'ai regardé le profil de @Paul Hinett aujourd'hui et j'ai remarqué qu'il est ami avec @Jack"

Les deux noms de profil doivent être liés.

J'espère que quelqu'un pourra m'aider !

0voto

Ce plugin semble être une solution partielle : https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

0voto

Kevin Points 632

Les jetons créés sur Facebook lorsque l'on fait référence à un ami dans la boîte de création de statut sont officieusement connus sous le nom de mentions o étiquettes .

Il semble que vous recherchiez une solution existante et robuste pour créer ces choses ; si c'est le cas, jetez un coup d'œil à Mentionneur dont la maintenance est assurée par votre serviteur.

Si, en revanche, vous souhaitez savoir comment un tel utilitaire est fabriqué, lisez la suite.

Un utilitaire de gestion des "mentions" comporte trois éléments :

  1. Module d'auto-complétion : Le composant responsable de l'obtention et de l'affichage de l'ensemble des éléments qui peuvent être utilisés pour créer une mention, à partir d'une chaîne de caractères.

  2. Module de suivi des mentions : Le composant responsable du suivi des données associées aux mentions ; au strict minimum, l'emplacement ainsi que les valeurs superficielles et substantielles (si elles existent) de chaque mention doivent être suivis à travers toutes les modifications du texte de l'élément d'entrée auquel l'utilitaire est apposé.

  3. Mentionner le module de différenciation visuelle : Composant chargé de différencier le texte de la mention du reste du texte de l'élément d'entrée sur lequel l'utilitaire est apposé*.

Si vous souhaitez savoir à quoi ressemble le code de chacun de ces modules, vous pouvez consulter le code source de Mentionator, qui est bien structuré, facile à suivre et abondamment commenté**.

*Il est important de noter que la mise en œuvre d'un tel dispositif par Facebook ne transforme pas les mentions en liens pendant la création du statut, comme je l'ai déduit. Au lieu de cela, le texte du statut est envoyé aux serveurs de Facebook avec des données (éventuellement en ligne) qui spécifient l'emplacement de chaque mention dans le statut. Lorsque le statut doit être transmis par les serveurs à un utilisateur, les données de localisation susmentionnées sont utilisées pour créer une version du texte avec des mentions "linkifiées".

**Le module d'autocomplétion de Mentionator est le widget jQuery UI Autocomplete, dont la source n'est pas incluse dans Mentionator.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X