Simple Yet Powerful jQuery Tags Input Plugin - Tag This

Tag This is an easy-to-use jQuery plugin to create a tagging input that allows you to manage tags programmatically.

Features:

• Use comma, Enter key or a custom delimiter to add tags.
• Click on the 'x' button to remove a tag.
• Tags validation with custom regex patterns.
• Duplicate tags checker.
• Auto suggest tags as a user types.

Basic usage:

1. Load the jQuery library and the jquery.tagthis.js script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="path/to/jquery.tagthis.js"></script>

2. Load the jquery-tag-this.css in the head section for basic styles.

<link rel="stylesheet" href="path/to/jquery-tag-this.css">

3. Create a normal text input that will be turned into a tagging UI control.

<input type="text" id="simple-tags" name="simple-tags">

4. Call the plugin on the input on page load.

$('#simple-tags').tagThis()

5. That's it. You can override the default settings listed below to customize your tagging system.

// Suggest tags as a user types
// jQuery UI autocomplete widget is required
autocompleteSource: null

// Allow the user to type to add tags.
interactive : true,

// The placeholder text
defaultText : 'type to tag',

// An extra delimiter that you can use to trigger the creation of a tag.
createTagWith : ',',

// Hide the element you called tagThis() on 
hideOriginal : true,

// Prevent duplicate tags from being entered.
noDuplicates : false,

// Remove the last tag in an interactive input with the backspace key.
removeWithBackspace : true,

// Validate tags as email addresses
email : true

// Validate tags against a custom regex pattern.
regex : '',

// maximum characters
maxChars : 0,

// maximum tags
maxTags : 0,

// width of the container
width : '300px',

// height of the container
height : '100px'

Change log:

2014-11-30

• added comma default delimiter
• added arrow key support

---

This awesome jQuery plugin is developed by dangribbin. For more Advanced Usages, please check the demo page or visit the official website.