jQuery tags plugin

from http://dragonartz.wordpress.com/tag/flowers/
Je cherchais un plugin pour jQuery pour prendre en charge joliment l’édition de tags, à la manière de ce que propose tumblr et n’en trouvais pas. Il est probable que la raison en soit que je n’a pas bien proprement cherché. Toujours est-il que j’ai décidé de coder un peu pour le prendre en charge.

Vous pouvez trouver ici une démo des premiers résultats.

L’utilisation est des plus simples:

$('.tags').tags(options);

Avec options :

{
    separator:',',
    add:function( added_tag_txt, tags ){ },
    remove: function( removed_tag_txt, tags ){ }
}

Tous les paramètres sont optionnels.

Les sources sont disponibles sur github.

Have fun.

  1. Aswome job :)
    Have you thought about publishing it on github or something? It would be great to help you with development of this plugin.

  2. Nice! Great plugin. I noticed that it wasn’t working in IE, so I added a tweak on line 91 to be:

    var tag_txt = $(this).parents(‘.jq_tags_token:first’).html().replace(/<.*?(.*?)/,  »);

    IE ends up capitalizing the tag causing the regex expression to fail otherwise, cheers!

    • moi
    • 15 octobre 2010

    nice

    • Przemek
    • 24 octobre 2010

    great plugin, although deleting tags doesn’t work in IE 8

  3. Thanks to David’s comment, it is now fixed.

  4. Bonjour,

    Exactement le plugin que je cherchais hélas impossible de le faire marcher correctement. A l’initialisation j’ai comme erreur Erreur : r[i].replace is not a function Fichier Source : …/js/jtags.js
    Ligne : 54

    J’ai pourtant la bonne version de jquery 1.6.2, ajouté un champ input comme il faut et repris la même fonction d’initialisation que l’exemple.

    Ensuite si j’ajoute un tag cela marche mais j’ai le droit à 2 tags de fonction js :

    function (value) { for (var i = 0, l = this.length; i < l; i++) { if (this[i] == value) { return true; } } return false; }

    function (values) { var result = []; for (var i = 0, l = this.length; i < l; i++) { if (!values.contains(this[i])) { result.push(this[i]); } } return result; }

  5. Trouvé mon bug, j’ai un conflit avec 2 fonctions ajoutés à l’objet Array JS

    /**
    * ajoute à l’objet tableau natif js la possiblité de vérifier si le tableau contient une valeur donnée
    * équivalent js du in_array en php
    */
    Array.prototype.contains = function(value) {
    for(var i = 0, l = this.length; i < l; i++) {
    if(this[i] == value) return true;
    }
    return false;
    }

    /**
    * ajoute à l'objet tableau natif js la possiblité de récupérer le tableau contenant les valeurs de l'un non contenues dans l'autre (paramètre)
    * équivalent js du array_diff en php
    */
    Array.prototype.diff = function(values) {
    var result = [];

    for (var i = 0, l = this.length ; i < l ; i ++) {
    if (!values.contains(this[i])) result.push(this[i]);
    }
    return result;
    }

    • piR
    • 3 octobre 2011

    Attention, ton greffon n’est pas prévu pour fonctionner avec jQuery en mode noConflict, parce que tu fais référence au $ directement.

    Il faut que tu entoures tout ton code avec

    (function($)
    {
    // ton code ici
    // dans ce bloc, le $ fera bien référence à jQuery
    }(jQuery))

    Tu peux regarder n’importe quel autre greffon, c’est fait comme ça.
    (Et la touche tab qui donne le focus à ‘submit comment’ c’est pas bon quand on a les gros doigts.)

    • piR
    • 4 octobre 2011

    Y a t’il moyen de mettre à jour la liste des tags en ajoutant des valeurs dans l’input text de référence ?
    $(‘.tags’).val($(‘.tags’).val()+ »,new_tag »)
    Je sais qu’on peut appeler .tags(), mais ça remet les options à zéro, et appeler .tags() avec les options créerait de la duplication de code.

    Quelques bogues :
    Quand on clique sur une croix pour enlever un tag, on remonte en haut de la page à cause du <a href="#", tu peux y ajouter onclick="return false;".
    Il y a un console.log qui traine, ce qui génère une erreur sous IE8.
    Dans la css, il y a un fon-weight au lieu de font-weight.
    Tu utilises -moz-border-radius mais pas border-radius.
    (Je pense qu'utiliser les préfixes propriétaires en production c'est mal, et il n'y a plus besoin de -moz-border-radius depuis firefox 4.)

  6. How can I delete the last added tag after some server side validation in the add callback function?

  7. Hi,

    i need the possibility to insert space chat between two words. For example « red beer ». Actually when i insert space the script « collapse » the two words into one for example « redbeer ».

    How can mantain the original space ?

    Thanks

  8. I got this error:

    Uncaught TypeError: Object # has no method ‘replace’ on line 55

    r[i] = r[i].replace( new RegExp(‘["' + this.sep + ' ]‘, ‘gi’),  »);

    • jjreddick
    • 10 février 2013

    awesome, easy to use plugin…

  1. 11 février 2010
  2. 19 juillet 2011