
Tagify is a tiny jQuery plugin used to generate a simple, animated, high-performance tag / token input from either input field or textarea. It also provides a vanilla JavaScript version which allows you to implement the tags input in pure JavaScript.
Features:
- Auto prevent duplicate tags.
- Auto split input text into tags by comma or Enter key.
- Compatible with Bootstrap 4 and Bootstrap 3.
How to use it:
1. Put the main style sheet tagify.css
in the head
:
<link href="tagify.css" rel="stylesheet">
2. Include the JavaScript file jQuery.tagify.js
after jQuery.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jQuery.tagify.js"></script>
3. You can also include the vanilla JS version if you'd like to implement the Tagify in pure JavaScript.
<script src="tagify.js"></script>
4. Create a normal input field or textfield for the tag input. You can set the predefined tags in the value
attribute as follow:
<input name="tags" placeholder="write some tags" value="predefined tags here">
5. Initialize the Tagify and done.
// jQuery $('[name=tags]').tagify(); // Vanilla JavaScript var input = document.querySelector('input[name=tags]'), tagify = new Tagify( input );
6. Enable the duplicate detection.
$('[name=tags]').tagify({duplicates : false});
Change log:
2018-03-28
- Bootstrap 4 Support
This awesome jQuery plugin is developed by yairEO. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 28.03.2018
- Source