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: 
  ^?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.