jQuery tags plugin

from http://dragonartz.wordpress.com/tag/flowers/
I was looking for a little plugin to handle the tags input in a nice way, like for instance tumblr does and could not find any. It might very well be because I did search hard enough but decided to code a little to handle it.

Here you can find a demo of the result.

The usage is pretty straight-forward:

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

With options :

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

All the parameters are optional.

The sources can be found on github.

  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
    • October 15th, 2010

    nice

    • Przemek
    • October 24th, 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
    • October 3rd, 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
    • October 4th, 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
    • February 10th, 2013

    awesome, easy to use plugin…

  1. February 11th, 2010
  2. July 19th, 2011