Easy Stylable jQuery Tags Input Plugin - Tag Input
File Size: | 3 MB |
---|---|
Views Total: | 2709 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.