Minimal Tags Input Plugin In jQuery - tagInput.js
File Size: | 5.9 KB |
---|---|
Views Total: | 3522 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal, clean, and customizable jQuery tags input plugin that turns text typed in an input box into tags by pressing Tab Or Space key.
Works with any frameworks (like Bootstrap) and uses a hidden input field to store the tag values.
How to use it:
1. Insert the taginput.css
and taginput.js
files into your webpage.
<link rel="stylesheet" href="/path/to/css/taginput.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/taginput.js"></script>
2. Load the Font Awesome for the Remove icon. OPTIONAL.
<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />
3. Create a container to hold the tags input.
<div class="myTags"></div>
4. Create a hidden input to store the values you typed in the tags input.
<input type="text" class="inputTags" hidden />
5. Call the function on the container element to initialize the tags input.
$('.myTags').TagsInput({ // placeholder text tagInputPlaceholder:'eg. jquery', // hidden input tagHiddenInput: $('.inputTags') });
6. Customize the appearance of the tags input.
$('.myTags').TagsInput({ // placeholder text tagInputPlaceholder:'eg. jquery', // hidden input tagHiddenInput: $('.inputTags'), // border color tagContainerBorderColor: '#222', // background color tagBackgroundColor: '#222', // tag color tagColor: '#fff', // border color of tags tagBorderColor: '#688eac' });
7. Customize the Remove icon in the taginput.js
.
// line 37 <i class="fa fa-times"></i>
Changelog:
2020-09-06
- fix hidden input value after rag remove
This awesome jQuery plugin is developed by cris-m. For more Advanced Usages, please check the demo page or visit the official website.