jQuery TagBox Plugin

After a long time we are back with another jQuery Plugin. This is a jQuery plugin to help add tags like input in your forms.
Demo: Click Here
Download: Click Here
Project Repository: Click Here

Usage:

  • In the header section add the following: 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
      <script type="text/javascript" src="http://jquery-tagbox.googlecode.com/hg/js/jquery.tagbox.js"></script>
      <script type="text/javascript">
        jQuery(function() {
          jQuery("#jquery-tagbox-text").tagBox();
          jQuery("#jquery-tagbox-select").tagBox({ 
            enableDropdown: true, 
            dropdownSource: function() {
              return jQuery("#jquery-tagbox-select-options");
            }
          });
        });
      </script>
  • Add your form elements like this: 
    <form action=".">
    <div class="row">
          <label for="jquery-tagbox-text">Text TagBox (Comma Separated)</label>
          <input id="jquery-tagbox-text" type="text" />
    </div><!--div.row-->
    <div class="row">
          <label for="jquery-tagbox-select">Dropdown TagBox</label>
          <select id="jquery-tagbox-select-options">
            <option value="jQuery">jQuery</option>
            <option value="MooTools">MooTools</option>
            <option value="ProtoType">ProtoType</option>
            <option value="Scriptaculous">Scriptaculous</option>
            <option value="Dojo">Dojo</option>
          </select><!--select#-->
          <input id="jquery-tagbox-select" type="text" />
    </div><!--div.row-->
    </form>

Advanced Options:

  • “separator” – This can be used to define the separator to be used to delimit the tags (Default: ‘,’)
  • “className” – Used to set the tag-box class name (Default: tagBox)
  • “tagInputClassName” – Used to set the class name of the tag input box (Default: ”)
  • “tagButtonClassName” – Used to set the class name of the tag button (Default: ”)
  • “tagButtonTitle” - Defines the title of the “Add Tag” button (Default: ‘Add Tag’)
  • “confirmRemoval” - Defines whether removal of tags requires confirmation dialog (Default: ‘false’)
  • “confirmRemovalText” – The text in the confirmationRemoval dialog (Default: ‘Do you really want to remove the tag?’)
  • “completeOnSeparator” – Defines whether tags are added when separator is input (Default: ‘true’)
  • “completeOnBlur” – Defines whether to add the tags when we blur from the tag input (Default: ‘false’)
  • “readonly” – Defines whether tag-box is readonly (Default: ‘false’)

New Options added in version 1.0.1

  • “enableDropdown” – Used to enable drop-down selection in the tag inpu (Default: ‘false’)
  • “dropdownSource” - Returns the source for the tag box drop-down selector could be a jQuery object or JSON of the form {“key”:”value”} (Default: function(){})
  • “removeTagText” - Defines the text inside the remove tag link (Default: ‘X’)
  • “maxTags” - Defines the maximum number of tags to be added (Default: ‘-1′ i.e. unlimited)
  • “maxTagsErr” - Callback to display error message when maxTags are reached (Default: ‘function(max_tags) { alert(“A maximum of “+max_tags+” tags can be added!”); }’)
  • “beforeTagAdd” - Callback executed before a tag is added (Default: ‘function(tag_to_add) {}’)
  • “afterTagAdd” - Callback executed after a tag is added (Default: ‘function(added_tag) {}’)

If you liked the plugin do not forget to share it on facebook, rate it and retweet it.

This entry was posted in Javascript, jQuery Plugins, Programming and tagged , , , , . Bookmark the permalink.

104 Responses to jQuery TagBox Plugin

  1. Tony Lea says:

    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.

  2. Steve says:

    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

  3. Pingback: 17 Fresh and Functional jQuery Plugins You will Love | izabegraphicdesign.com

  4. Sridhar says:

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

    • GeekTantra says:

      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

  5. 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});

    • GeekTantra says:

      Hi Greg,

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

      Regards,
      GeekTantra

      • taru says:

        r u have demo of autocomplete ?

      • Brat says:

        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. :)

  6. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011

  7. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Free Web Design Tucson

  8. Pingback: 50 new and crazy cool jQuery plugins from year 2011 - WordPress Vampire

  9. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | ABDULLAH TURHAN

  10. Pingback: 50 个新酷的 jQuery 插件

  11. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | General Zone

  12. leopard says:

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

  13. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Developers Blog

  14. Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Drawlines

  15. Cody says:

    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.

    • GeekTantra says:

      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

  16. Lucio Tars says:

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

  17. Pingback: 40 New jQuery Plugins

  18. Pingback: Web Development articles, tutorials, help » Blog Archive » 40 New jQuery Plugins

  19. Pingback: 10 новых бесплатных полезных jQuery плагинов | webkladez - Полезные уроки для photoshop, wordpress, joomla

  20. Pingback: 40 jQuery Eklentisi

  21. Pingback: چند افزونه مفید برای jQuery | آریانو

  22. Pingback: Roundup of 25 Ovan Fresh jQuery plug-ins | Web Design Burn

  23. Pingback: 2011年jQuery插件精选50例演示及下载 | Leocaoの読者文摘☆Reader's Digest

  24. Pingback: New And Crazy Cool jQuery Plugins From Year 2011 | W Design Love | Graphic and Web Design Blog | Coding | tutorials | freebies | Wordpress | inspiration | Blog

  25. Fred says:

    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

  26. Pingback: Top Wordpress jQuery Plugins-Nihad Nagi

  27. Pingback: E-sitesweb » 50 New And Crazy Cool jQuery Plugins From Year 2011

  28. Pingback: 40+ Useful and Fresh jQuery Plugins

  29. Pingback: Sacima鲨鳍马工作室 » Blog Archive » 40+ Useful and Fresh jQuery Plugins

  30. Trun says:

    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.

  31. slov says:

    hoe to remove ‘tagButton’ / add tag button ?

  32. Pingback: More than 40 new and very useful jQuery plug - Open News

  33. Pingback: Autocomplete & tag editor by votreweb - Pearltrees

  34. Pingback: 40 Plugins úteis com jQuery | guilhermekami

  35. Pingback: The 50 Most Useful jQuery Plugins from 2011

  36. Pingback: 2011年最有用的50个jQuery插件

  37. Wouter says:

    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!

    • hoang phan says:

      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!

  38. Pingback: The 50 Most Useful jQuery Plugins from 2011 | Fly mini

  39. Pingback: Los 50 plugins jQuery más útiles de 2011 | loureyro.com.ar

  40. Pingback: 40款非常有用的 jQuery 插件推荐(系列一) – 峰随意动,尽从容!

  41. Pingback: Most Useful jQuery Plugins from 2011 – Form & Validation | ChurchMag

  42. Pingback: 18 Fresh & Useful jQuery Plugins For September 2011 | 1step web design: Best for developer and designer

  43. Pingback: 10 Advanced but Simple jQuery Pugins | jQuery4u

  44. Pingback: 40款非常有用的 jQuery 插件推荐(系列一) « 何金民

  45. Pingback: 28 Most Useful jQuery Plugins from 2011 | 1step web design: Best for developer and designer

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

  47. Pingback: The best 120+ Jquery plugins from around the internet

  48. muadz says:

    very very nice ..
    Thank you very much

  49. muadz says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *