Minimalist Tags Input Plugin with jQuery and Bootstrap - tags.js
File Size: | 7.98 KB |
---|---|
Views Total: | 2461 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simplest jQuery plugin which converts a standard text input into a tagging widget styled with Twitter's Bootstrap 3.
Features:
- Type something in the text field and press the enter key to add a new tag.
- Click on the tag label to edit the tag.
How to use it:
1. Load the Bootstrap's stylesheet file in the head section of the document.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
2. Load the jQuery.tags.js script after jQuery JavaScript library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="dist/jquery.tags.min.js"></script>
3. Adding the data-toggle="tags"
attribute to your text input will auto initialize the plugin on document ready.
<input type="text" data-toggle="tags" />
4. Or initialize the plugin by calling the $('#id').tags()
method on your text input.
$('#id').tags('tag1', 'tag2');
5. You can get the value your user input using $('#id').val()
$('#value').text($('#id').val());
6. Available options.
values: [] // initial values
Change log:
2015-07-09
- fixed bugs
- added several options.
- fixed style.
This awesome jQuery plugin is developed by QingWei-Li. For more Advanced Usages, please check the demo page or visit the official website.