jQuery Plugin For Tag / Token Style Text Entry - Taginput

A dead simple jQuery plugin which turns a regular input filed into a tagging widget to manage tags or tokens. Type some text in the input field, and separate them with Enter, Space, Comma, or Semicolon.

Basic usage:

1. Create the html for the tagging / tokenizer input.

<ul id="demo" class="taginput-artsy">
  <li class="taginput-input"><input></li>
</ul>

2. Include jQuery JavaScript library and the jQuery Taginput plugin's script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="javascripts/jquery-taginput.js"></script>

3. The required CSS styles for the plugin. Add the following CSS snippets into your CSS file or include the jquery-taginput-artsy.css directly on the webpage.

.taginput-artsy {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.taginput-artsy .taginput-tag, .taginput-artsy .taginput-input { display: inline-block; }

.taginput-artsy .taginput-tag, .taginput-artsy .taginput-input > input {
  line-height: 1.5;
  margin: 0.2em 0.4em 0.2em 0;
}

.taginput-artsy .taginput-input > input {
  outline: none;
  border-color: transparent;
}

.taginput-artsy .taginput-tag {
  background-color: #efefef;
  padding: 0 0.4em;
}

.taginput-artsy .taginput-tag-delete {
  margin-left: 0.2em;
  cursor: pointer;
}

4. Initialize the plugin and done.

$("#demo").taginput();

5. Advanced usage.

$("#demo").taginput({

  // default delimiters: enter, space, comma and semicolon
  delimiters: [13,32,188,188,186],

  // key codes to ignore
  ignoredKeys: [],

  // custom templates
  tagTemplate: '<li class="taginput-tag"><span class="taginput-tag-label"></span><span class="taginput-tag-delete">&times;</span></li>',
  inputTemplate: '<li class="taginput-input"><input></li>',

  // callback event
  isTaggable: function ($input) {}
  
});

---

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