jQuery TagBox Plugin

Posted on May 31, 2011 by GeekTantra

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:

^?View Code XML

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

^?View Code XML

<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 Javascript, jQuery, Open Source, Plugins, tagbox. Bookmark the permalink.

84 Responses to jQuery TagBox Plugin

Tony Lea says:

June 1, 2011 at 8:20 pm

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 says:

June 2, 2011 at 2:26 am

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
Pingback: 17 Fresh and Functional jQuery Plugins You will Love | izabegraphicdesign.com
Sridhar says:

June 14, 2011 at 4:53 pm

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

Reply
- GeekTantra says:
  
  June 16, 2011 at 2:50 am
  
  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 says:

June 15, 2011 at 1:31 am

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 says:
  
  June 15, 2011 at 10:04 am
  
  Hi Greg,
  
  Do send a link to your implementation for others to follow.
  
  Regards,
  GeekTantra
  
  Reply
  - taru says:
    
    December 2, 2011 at 11:36 am
    
    r u have demo of autocomplete ?
    
    Reply
  - Brat says:
    
    February 21, 2012 at 2:33 am
    
    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
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Free Web Design Tucson
Pingback: 50 new and crazy cool jQuery plugins from year 2011 - WordPress Vampire
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | ABDULLAH TURHAN
Pingback: 50 个新酷的 jQuery 插件
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | General Zone
leopard says:

July 19, 2011 at 12:34 am

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

Reply
- GeekTantra says:
  
  September 18, 2011 at 8:43 am
  
  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
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Developers Blog
Pingback: 50 New And Crazy Cool jQuery Plugins From Year 2011 | Drawlines
Cody says:

September 17, 2011 at 12:53 am

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 says:
  
  September 18, 2011 at 8:44 am
  
  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 says:

September 22, 2011 at 12:30 pm

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

Reply
- GeekTantra says:
  
  September 23, 2011 at 8:44 am
  
  Just set the value of your input field to the delimiter separated values. It should load them up as the default tags.
  
  Reply
Pingback: 40 New jQuery Plugins
Pingback: Web Development articles, tutorials, help » Blog Archive » 40 New jQuery Plugins
Pingback: 10 новых бесплатных полезных jQuery плагинов | webkladez - Полезные уроки для photoshop, wordpress, joomla
Pingback: 40 jQuery Eklentisi
Pingback: چند افزونه مفید برای jQuery | آریانو
Pingback: Roundup of 25 Ovan Fresh jQuery plug-ins | Web Design Burn
Pingback: 2011年jQuery插件精选50例演示及下载 | Leocaoの読者文摘☆Reader's Digest
Ananya says:

October 18, 2011 at 7:10 pm

Beautiful JQuery Plugins

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

November 8, 2011 at 7:06 pm

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
Pingback: Top Wordpress jQuery Plugins-Nihad Nagi
Pingback: E-sitesweb » 50 New And Crazy Cool jQuery Plugins From Year 2011
Pingback: 40+ Useful and Fresh jQuery Plugins
Pingback: Sacima鲨鳍马工作室 » Blog Archive » 40+ Useful and Fresh jQuery Plugins
Trun says:

November 30, 2011 at 12:00 am

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 says:

November 30, 2011 at 10:04 am

hoe to remove ‘tagButton’ / add tag button ?

Reply
Pingback: More than 40 new and very useful jQuery plug - Open News
Pingback: Autocomplete & tag editor by votreweb - Pearltrees
Pingback: 40 Plugins úteis com jQuery | guilhermekami
Pingback: The 50 Most Useful jQuery Plugins from 2011
Pingback: 2011年最有用的50个jQuery插件
Wouter says:

December 10, 2011 at 4:59 pm

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 says:
  
  December 22, 2011 at 3:27 pm
  
  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
Pingback: The 50 Most Useful jQuery Plugins from 2011 | Fly mini
Pingback: Los 50 plugins jQuery más útiles de 2011 | loureyro.com.ar
Pingback: 40款非常有用的 jQuery 插件推荐（系列一） – 峰随意动，尽从容！
Pingback: Most Useful jQuery Plugins from 2011 – Form & Validation | ChurchMag
Pingback: 18 Fresh & Useful jQuery Plugins For September 2011 | 1step web design: Best for developer and designer
Pingback: 10 Advanced but Simple jQuery Pugins | jQuery4u
Pingback: 40款非常有用的 jQuery 插件推荐（系列一） « 何金民
Pingback: 28 Most Useful jQuery Plugins from 2011 | 1step web design: Best for developer and designer
Joseph Buarao says:

January 17, 2012 at 6:01 pm

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

Reply
Pingback: The best 120+ Jquery plugins from around the internet
muadz says:

February 1, 2012 at 11:44 am

very very nice ..
Thank you very much

Reply
muadz says:

February 1, 2012 at 11:50 am

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

Reply