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: 

• Add your form elements like this: 

  
  
        Text TagBox (Comma Separated)
        
  
  
        Dropdown TagBox
        
          jQuery
          MooTools
          ProtoType
          Scriptaculous
          Dojo
        
        
  
  
  

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.