This time I will share jQuery Plugin and tutorial about Flat jQuery Tags Input Plugin with Autocomplete – inputTags, hope it will help you in programming stack.
inputTags is a pretty, flat style jQuery tags input plugin which allows you to manage tags in a text input with support for autocomplete and tags validation.
How to use it:
1. Load the inputTags.css in the header for default plugin styles.
1 |
<link rel="stylesheet" href="css/inputTags.css"> |
2. Create a text field for the tags input.
1 |
<input type="text" id="tags"> |
3. Load jQuery library and the inputTags.js at the bottom of the webpage.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="js/inputTags.jquery.js"></script> |
4. Initialize the plugin with a list of predefined tags.
2 |
tags: ['jQuery', 'JavaScript'] |
5. Add an array of tags for the autocomplete list that displays the rest of tags when a user is typing.
3 |
values: ['jQuery', 'JavaScript'] |
6. More configuration options.
31 |
empty: 'Attention, vous ne pouvez pas ajouter un tag vide.', |
32 |
minLength: 'Attention, votre tag doit avoir au minimum %s caractères.', |
33 |
maxLength: 'Attention, votre tag ne doit pas dépasser %s caractères.', |
34 |
max: 'Attention, le nombre de tags ne doit pas dépasser %s.', |
35 |
exists: 'Attention, ce tag existe déjà !', |
36 |
autocomplete_only: 'Attention, vous devez sélectionner une valeur dans la liste.', |
7. Events.
01 |
$('#tags').inputTags({ |
02 |
init: function($elem) { |
03 |
console.log('Event called on plugin init', $elem); |
06 |
console.log('Event called when an item is created'); |
09 |
console.log('Event called when an item is updated'); |
12 |
console.log('Event called when an item is deleted'); |
14 |
selected: function() { |
15 |
console.log('Event called when an item is selected'); |
17 |
unselected: function() { |
18 |
console.log('Event called when an item is unselected'); |
20 |
change: function($elem) { |
21 |
console.log('Event called on item change', $elem); |
Changelog:
2016-07-28
2016-07-27
2015-10-19
- Fix default values issue + add autocompleteTagSelect event
2015-10-14
- Add default input values check
2015-08-17
- Fix custom tags fill issue
This awesome jQuery plugin is developed by betaWeb. For more Advanced Usages, please check the demo page or visit the official website.
