Easy Stylable jQuery Tags Input Plugin - Tag Input

Just another jQuery plugin to turn text into tags/tokens in a input box, easily stylable via jQuery UI or Bootstrap.

Basic Usage:

1. Include the necessary jQuery javascript library together with JQuery tag input plugin's Javascript and CSS in the document.

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

2. Include the jQuery UI OR Twitter's Bootstrap 3 to style the tags input.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

3. Create a standard text input box in the document.

<input id="demo" type="text" placeholder="Add tag">

4. Call the plugin on the input box you just created and styke the tags input using the style option.

$('#demo').taginput({
style: 'bootstrap'
);

5. All the options with defaults.

style: 'jquery', // jquery or bootstrap
separateKeyCodes: [ keys.WHITESPACE, keys.ENTER, keys.TAB ],
placeholder: 'Add tag...',
allowMultiple: false,
caseSensitive: false,
onExists: function($tag) {
$tag.hide().fadeIn();
},
tagLabel: function(tag){
return tag;
},
tagValue: function(tag){
return tag;
}

Change log:

v1.1.0 (2014-07-21)

• Minor changes

---

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