jQuery TagBox Plugin

Home / Javascript
jQuery TagBox Plugin
31May

jQuery TagBox Plugin

About the Author

Comments

    Tony Lea - June 1, 2011

    Cool plug-in dude :) I could definitely see some use for this. I just recently wrote my first plug-in as well. jQuery illuminate. Check it out here: http://www.tonylea.com/2011/jquery-illuminate/ . Very cool plug-in though. Good job.

    Reply
    Steve - June 2, 2011

    Great plugin, have emailed you also. We have this on our dev area working a treat, it really "functionality wise" blows all other jQuery Taggers out of the water.

    Escellent work

    Reply
    Sridhar - June 14, 2011

    Excellent plugin. I was looking for something similar to this.
    Is this plugin has the way to get all the added tags?

    Reply
      GeekTantra - June 16, 2011

      Hi Sridhar,

      You can get all the tags like this:

      jQuery("#tb").tagBox();

      To get all the tags in #tb just call jQuery("#tb").val().split(',');

      Regards,
      GT

      Reply
    Greg Reinacker - June 15, 2011

    Very nice. I used this together with the jquery-UI autocomplete; the code to do this looks like:

    var tag_data = "one two three".split(" ");

    $("#tag_list").tagBox();
    $(".tagBox-input").autocomplete({source: tag_data});

    Reply
      GeekTantra - June 15, 2011

      Hi Greg,

      Do send a link to your implementation for others to follow.

      Regards,
      GeekTantra

      Reply
        taru - December 2, 2011

        r u have demo of autocomplete ?

        Reply
        Brat - February 21, 2012

        First, thank you for this great plugin! Simple, elegant and easy for novices to use (as I deal with writers, not techies :) )

        I've successfully implemented jQuery UI Autocomplete with this plugin, but you do have to set it up the right way.

        Basically, you assign jQuery UI's autocomplete to the TagBox input class name (className) used to define the actual tag box. The plugin's default is ".tagBox", so if you're using multiple instances of TagBox you must use unique class names. You also need to have unique selector names for each occurrence.

        Make sure you successfully call jQuery UI in your script, of course.

        EXAMPLE:

        jQuery(“#tb1”).tagBox( {className: "tagBox-yourclassname"} );
        jQuery("#tb2").tagBox( {className: "tagBox-anotherclassname"} );

        Now you can call jQuery UI Autocomplete. on each specific tag box as shown below:

        var yourTags = [];
        jQuery( ".tagBox-yourclassname-input").autocomplete({
        source: yourTags,
        // add all your other parameters here if nay
        });

        var newTags = [];
        jQuery( ".tagBox-newclassname-input").autocomplete({
        source: newTags,
        // add all your other parameters here if nay
        });

        The above shows how you could call the specific tags if you were using PHP . Your specific implementation will be different, but the principle is the same.

        NOTE: VERY IMPORTANT - By using a distinct className other than the default ".tagBox", you will need to edit your TagBox style sheet to provide the right class definitions for EACH className. I'd suggest you make a copy of the default TagBox CSS file and edit that one, and then embed that new file.

        Hope this proves helpful. :)

        Reply
    leopard - July 19, 2011

    Hi, is it possible to store or save the tags using cookies or loacalstorage?

    Reply
      GeekTantra - September 18, 2011

      Yes you can store the tags using cookies or local storage. Just need to save the delimiter separated tags in the storage and retrieve whenever necessary.

      Reply
    Cody - September 17, 2011

    I'm trying to use your plugin on a page that is dynamically created on the server. I need to have at least five instances of the tag box on the page.

    I want to have one call that does the tagBox instead of a call for each tagBox instance. Seems that I can do that except for where I specify the dropdownSource. If I coulde specify the dropdown control on the field, I could do this. Anybody have any ideas how to do this? I'm very new to jQuery and am having issues with seeing how to do this. Thanks.

    Reply
      GeekTantra - September 18, 2011

      Hi,

      Multiple instances should work completely fine with either drop-down or input-box. Could you provide a link to your implementation for me to check it out and suggest fixes.

      Regards,
      GeekTantra

      Reply
    Lucio Tars - September 22, 2011

    Cool plugin.. just wondering how will i load default tags. I tried this it produce two tags but no text :(

    Reply
      GeekTantra - September 23, 2011

      Just set the value of your input field to the delimiter separated values. It should load them up as the default tags.

      Reply
    Fred - November 8, 2011

    Nice plugin - I've been looking for something like this for a while, to implement Flickr/Wordpress-style tag boxes. One thing I can't figure, though - how can I pass values as JSON to the plugin, so that existing values are displayed as tagboxes? For instance, if I've a tags input box, I'd like existing tags, retrieved via a database query, to appear below the input box. The dropDownSource option is useful for, well, dropdowns, but is there similar for a text input?

    Sorry if I'm missing something blindingly obvious :(

    Fred

    Reply
    Trun - November 30, 2011

    hi

    i want to know how to update tags,
    for example i add tags value in sql database and i want to get beck in a my update form,
    same style like i added fist time, and i wont delete some tags and add some tags.
    how can i update ?

    thanks.

    Reply
    slov - November 30, 2011

    hoe to remove 'tagButton' / add tag button ?

    Reply
    Wouter - December 10, 2011

    Hello,

    I really like your tagbox plugin. Works very well in my script. But the only thing is that i want to edit an item and show the tags.

    I filled the input box with the comma seperated values. The tags show up as default. BUT when i have an selectbox with all the avaible tags filled up the default tags are empty. The scripts creates an instance for each tag but there is no text in them.

    I tried to add the disabled="disabled" state to the option values which are allready tags, but that won't make a difference.

    Do you have any idea?

    Thanks in advance!

    Reply
      hoang phan - December 22, 2011

      Hi Wouter,

      'I tried to add the disabled=”disabled” state to the option values which are allready tags, but that won’t make a difference. ' ==> you also need to make the first enable item as selected. Add following code in the end of 'generate_tags_list()' function
      Code:
      $tag_input_elem.find('option:enabled').first().attr("selected", "selected");

      And for disable option values add following code after line 158 inside "jQuery.each(tags_list, function(key, val)" function

      if($tag_input_elem.is("select"))
      $tag_input_elem.find('option[value="'+val+'"]').attr("disabled", "disabled");
      }

      Hope it help you!

      Reply
    Joseph Buarao - January 17, 2012

    wow.. this is cool plugin.. I like it.. btw, it this working good in IE6?

    Reply
    muadz - February 1, 2012

    very very nice ..
    Thank you very much

    Reply
    muadz - February 1, 2012

    very very nice .. because I'm looking for backlinks to raise my Rang
    visit my web, http://produsenkostumbadut.com
    Thank you very much

    Reply
    Jonam - March 30, 2012

    i like your plugin!

    how can i manually add tags in javascript?

    Reply
      Geo - July 18, 2013

      I would like to know the same thing.

      Reply
    zubair - June 16, 2012

    very nice

    Reply
    Girish Sahu - October 9, 2012

    Great Plugin....

    Reply
    ibnu - October 25, 2012

    It's wonderfull jquery-tagbox-plugin, i will tray it to my site, i hope can run well easily.
    Thank you

    Reply
    Fahad - November 3, 2012

    How to make tags case insensitive? Just to make sure same tag cannot be entered using different case?

    Reply
    Fabio - January 18, 2013

    amazing.. great plugin..

    Reply
    Fabio - January 29, 2013

    Hi, i'm back... i include a function for load tags..

    ...
    // Include tags
    pre_include_tags();
    ...

    function pre_include_tags() {
    jQuery.each($tag_input_elem.find('option[disabled="disabled"]'), function(key, val) {
    add_tag(val.value);
    });
    }

    then, only set option "disabled='disabled'"....

    Reply
      Geo - July 18, 2013

      Where do we put this code for it to work? I want to be able to add tags via javascript.

      Reply
    Dominik - July 4, 2013

    I have problem with retrieving already chosen and saved tags from database (tag_id) and display them on site. Could somebody tell me what jQuery method should I use or how to do it?
    Here is what I do:
    1. Open products page and "Add" tag/s
    2. Submit form and my chosen tags are being nicely saved to database by their id.
    3. I go back (edit) product and I would like to see already saved tags(blue icons).
    I am using Ruby On Rails and I have problem with jQuery. I just don't know how to display them by tag_id.
    I would appreciate any help.
    Dominik

    Reply
    Fabio - October 29, 2013

    update:
    function "live()" is deprecated in jquery 1.7+... (http://api.jquery.com/live/)

    rewrite...
    jQuery('.'+options.className+'-remove-'+uuid).live( "click", function () { // in line 131
    ...
    jQuery( document ).on( "click", '.'+options.className+'-remove-'+uuid , function() {

    thanks, great work.

    Reply
    azha - February 20, 2014

    how to get the value and pass to php and mysql

    Reply
    azha - February 20, 2014

    nice plug works fine and great

    Reply
    azha - February 28, 2014

    Can anyone help me how to load value from database

    Reply
      azha - February 28, 2014

      Its simple, just load from database in values

      Reply
    Scout - June 4, 2014

    hello, i want to know how to load tags from a value in a variable :) thanks

    Reply

Leave a Comment

Notify me of followup comments via e-mail

Get Adobe Flash player