🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

tags-input

Documentation

inputTags.js

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" />

JS:

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

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.

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

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);     } });

**Add events after plugin initialization** ```js $('#tags').inputTags().on('change', function($elem) { console.log('Event called on item change', $elem); }); ``` same as: ```js $('#tags').inputTags('event', 'change', function($elem) { console.log('Event called on item change', $elem); }); ```

You May Also Like