Flat jQuery Tags Input Plugin with Autocomplete - inputTags

inputTags is a pretty, flat style jQuery tags input plugin that 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.

<link rel="stylesheet" href="css/inputTags.css">

2. Create a text field for the tags input.

<input type="text" id="tags">

3. Load jQuery library and the inputTags.js at the bottom of the webpage.

<script src="jquery.min.js"></script>
<script src="js/inputTags.jquery.js"></script>

4. Initialize the plugin with a list of predefined tags.

$('#tags').inputTags({
  tags: ['jQuery', 'JavaScript']
});

5. Add an array of tags for the autocomplete list that displays the rest of tags when a user is typing.

$('#tags').inputTags({
  autocomplete: {
    values: ['jQuery', 'JavaScript']
  }
});

6. More configuration options.

// an array of tags
tags: [],
keys: [],

// for tags validation
minLength: 2,
maxLength: 30,
max: 6,

// Events
init: false,
create: false,
update: false,
destroy: false,
focus: false,
selected: false,
unselected: false,
change: false,

// editable
editable: true,

// for autocomplete list
autocomplete: { 
  values: [],
  only: false
},

// custom error messages
errors: { 
  empty: 'Attention, vous ne pouvez pas ajouter un tag vide.',
  minLength: 'Attention, votre tag doit avoir au minimum %s caractères.',
  maxLength: 'Attention, votre tag ne doit pas dépasser %s caractères.',
  max: 'Attention, le nombre de tags ne doit pas dépasser %s.',
  exists: 'Attention, ce tag existe déjà !',
  autocomplete_only: 'Attention, vous devez sélectionner une valeur dans la liste.',
  timeout: 8000
}

7. Events.

$('#tags').inputTags({
  init: function($elem) {
    console.log('Event called on plugin init', $elem);
  },
  create: function() {
    console.log('Event called when an item is created');
  },
  update: function() {
    console.log('Event called when an item is updated');
  },
  destroy: function() {
    console.log('Event called when an item is deleted');
  },
  selected: function() {
    console.log('Event called when an item is selected');
  },
  unselected: function() {
    console.log('Event called when an item is unselected');
  },
  change: function($elem) {
    console.log('Event called on item change', $elem);
  }
});

Changelog:

2022-02-24

• refactor

2022-02-23

• use e.key

2016-07-28

• Update CSS and JS

2016-07-27

• Fix autocomplete issue

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.