En utilisant jquery, comment gérer les tags de la même manière que Live Mail gère les adresses e-mail?

Question

J'ai besoin d'un système semblable à un tag qui fonctionne de manière très similaire à la façon dont Live Mail gère les adresses e-mail.

Pour ceux qui ne le savent pas, Live Mail fournit un textbox dans lequel vous pouvez entrer des adresses e-mail. Lorsque vous avez fini de taper une adresse e-mail, Live Mail remplace l'adresse du texte brut par une div contenant une bordure et contenant le texte. Si vous voulez supprimer l'adresse, vous passez la souris sur l'adresse et une croix apparaît sur la droite. Vous ne pouvez pas modifier une adresse après qu'elle a été "marquée". Si vous voulez le changer, vous devez le supprimer et le rajouter.

Ceci est la fonctionnalité dont j'ai besoin, sauf que je vais le faire avec des balises au lieu d'adresses e-mail.

Je me demandais si quelqu'un connaissait un composant jquery qui fonctionne de cette façon.

Cheers, Anthony

Answer 1

jquery facebook autocomplete (via Ajaxian)

Il y a un livre sur Jquery 1.6 UI qui a un auto-complet des e-mails ainsi que onle des derniers exemples de saisie semi-automatique (book source code).

Answer 2

Je ne ai jamais entendu parler d'un tel plug-in JQuery, mais il ne devrait pas être trop difficile à accomplir sur votre propre. Cependant, il faudra des connaissances sur CSS pour les regards bien sûr.

// Code for replacing a textbox with a DIV on blur. 
$('#textbox').blur(function() { 
    var content = $(this).val(); 
    if (!content) return; // Don't make anything out of empty textboxes. 
    // Create a DIV and make it a sibling to the textbox. 
    $('<div>').html(content).appendTo($(this).parent()); 
    // Remove the textbox. 
    $(this).remove(); 
}); 

Je n'ai d'ailleurs pas testé cela, mais cela devrait vous mettre sur la bonne voie.

HTH!