Presentation

inputTags.js is a simple jQuery plugin allowing to add, edit or remove tags in a tags list.


Installation

Make sure you include the script after the jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/path/to/inputTags.jquery.js"></script>

Getting started

Setting up inputTags.js is very easy. You just have to add this few lines below and that's it !

HTML:

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

You can specify defaults values (separated by commas) :

<input type="text" value="one,two,three" id="tags" />

JS:

$('#tags').inputTags();

Try it !

Below, you can add, edit and remove tags from lists.


Basic example :

$('#tags').inputTags();

Plugin initialized without any options.


Plugin with custom tags :

$('#inputTags_d1').inputTags({
  tags: ['jQuery', 'tags', 'plugin', 'Javascript'],
  max: 8
});

Plugin initialized with 2 options:
   - tags (Array) Custom tags
   - max (Boolean|Int) Maximum number of tags that the user can enter


Plugin with only the autocomplete list values authorized:

$('#inputTags_d3').inputTags({
    autocomplete: {
        values: ['jQuery', 'tags', 'plugin', 'Javascript'],
        only: true
    },
    max: 3,
    create: function() {
        console.log('Tag added !');
    }
});

Plugin initialized with 2 options:
   - tags (Array) Custom tags
   - autocomplete:values (Array) values for the autocomplete list
   - autocomplete:only (Boolean) Means that only values of the above list are authorized
   - create (Boolean|Function) Event called after adding a tag

Documentation

Basic usage

Initialize plugin with custom tags

Allows you to add custom tags on plugin initialization.

$('#tags').inputTags({
  tags: ['jQuery', 'tags', 'plugin'] // Custom tags list
});

Advanced usage

Initialize plugin with tags autocomplete

Allows you to add a custom list from which the user can choose one or more tags.

$('#inputTags_d2').inputTags({
    autocomplete: {
        values: ['Pellentesque', 'habitant', 'morbi', 'tristique', 'senectus']
    }
});

Methods

Coming soon...


Events

Add events listener on plugin initialization

$('#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);
    },
    autocompleteTagSelect: function($elem) {
      console.log('Event called on tag selection', $elem);
    }
});


Add events after plugin initialization

$('#tags').inputTags().on('change', function($elem) {
  console.log('Event called on item change', $elem);
});

same as:

$('#tags').inputTags('event', 'change', function($elem) {
  console.log('Event called on item change', $elem);
});