Animated jQuery Tag/Token Input Plugin - masterblaster

masterblaster is a small jQuery tag management plugin which allows you to add tags/tokens by pressing Tab or Enter key.

Features:

• Custom trigger keys. (Default: Tab/Enter)
• Custom tag rules. 
• Validates tags on change.
• Shows a simple animation when you add/remove a tag.
• Events & Methods supported.

How to use it:

1. Include jQuery library and the jQuery masterblaster plugin's javascript and CSS in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.masterblaster.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.masterblaster.css">

2. Create an input filed that will be converted into a tag manager.

<input id="tags" placeholder="Enter tags here"/>

3. The Javascript.

var $mb = $( "#tags" );
$mb.masterblaster( { 
tagRules: {
unique: true,
minLength: 3
}
});
$mb.masterblaster( "push", "tag 1" );
$mb.masterblaster( "push", "tag 2" );

4. Options and defaults.

animate: true,
triggerKeys: [ 9, 13 ], //keycode when entered adds the tag
showAddButton: true, // 
helpText: "Hit Tab or Enter to add",
validateOnChange: false, // Trigger errors on input change if true -- otherwise trigger only on save.
tagRules: {
  unique: false, // Tags must be unique to be added.
  minLength: 1, // Minimum character length a tag must be.
  maxLength: null, // Maximum character length a tag can be.
  regexp: null // Pass a regular expression to test tags against
},

5. Events.

// Occurs on addition of tag through any means.

$mb.on( "mb:add", function( e, tagName ) {
    console.info( tagName );
} );

// Occurs on removal of tag through any means.
$mb.on( "mb:remove", function( e, tagName ) {
    console.info( tagName );
} );

// Occurs when one of the tagRules fail on save.
$mb.on( "mb:error", function( e, tagName, errorMsg ) {
  console.info( errorMsg ); //tag 1 is not in the valid format.
} );

6. Methods.

• push(tagName) - Add tagName to the end of the list.
• pop() - Removes last tag.
• remove(tagName) - This will remove all tags tagName.
• destroy() - Destroy/cleanup instance of plugin.

---

This awesome jQuery plugin is developed by aef-. For more Advanced Usages, please check the demo page or visit the official website.