This time I will share jQuery Plugin and tutorial about Material Inspired Tag Input Plugin For jQuery – AddTags, hope it will help you in programming stack.
| File Size: | 25.1 KB |
|---|---|
| Views Total: | 1136 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
AddTags is a JavaScript plugin used to create a simple, customizable, Material Design style tags input that can be implemented in either jQuery or Vanilla JavaScript.
Features:
- Highly customizable.
- Duplicate tags detection.
- Predefined tags.
- Allows to remove tags.
- # hash is supported.
- Custom delimiters.
- Case sensitive or not.
- Allows to set the maximum number of tags
How to use it:
1. Include the latest version of jQuery library if you’d like to implement the AddTags as a jQuery plugin.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2. Include the jQuery AddTags plugin and other required resources on the webpage.
1 |
<link rel="stylesheet" href="addTags.css"> |
2 |
<script src="res/Obj.js"></script> |
3 |
<script src="addTags.js"></script> |
3. Create a normal input field for the plugin.
1 |
<input id="demo"> |
4. Initialize the AddTags with default settings.
1 |
// jQuery |
2 |
$("#demo").addTags(); |
3 |
4 |
// JavaScript |
5 |
$add.Tags("#demo"); |
5. All available settings with default values.
01 |
$("#demo").addTags({ |
02 |
03 |
// name of the tags input |
04 |
name: "", |
05 |
06 |
// class of the tags input |
07 |
class: "", |
08 |
09 |
// ID of the tags input |
10 |
id: "", |
11 |
12 |
// placeholder of the tags input |
13 |
placeholder: "", |
14 |
15 |
// the maximum number of tags |
16 |
limit: 0, |
17 |
18 |
// enable tab key to add the current value as a tag |
19 |
tab: false, |
20 |
21 |
// enable space key to add the current value as a tag |
22 |
space: false, |
23 |
24 |
// enable comma key to add the current value as a tag |
25 |
comma: true, |
26 |
27 |
// enable enter key to add the current value as a tag |
28 |
enter: false, |
29 |
30 |
// enable backspace key to delete the tag |
31 |
backspace: true, |
32 |
33 |
// duplicate detection |
34 |
duplicates: false, |
35 |
36 |
// is removable? |
37 |
removable: true, |
38 |
39 |
// default delimiter |
40 |
delimiter: ",", |
41 |
42 |
// is case sensitive? |
43 |
casesensitive: false, |
44 |
45 |
// prepend a hash to the tag |
46 |
autohash: false, |
47 |
48 |
// should a hash be prepended to each tag in the value string |
49 |
valuehash: false |
50 |
51 |
}); |
6. You’re also allowed to pass the options via HTML5 data attributes as this:
1 |
<input id="demo" data-duplicates="true"> |
This awesome jQuery plugin is developed by dustinpoissant. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
