Easy Tags Manager Widget With Autocomplete Support - Tag-It

Easy Tags Manager Widget With Autocomplete Support - Tag-It
File Size: 8.59 KB
Views Total: 4414
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Tag-It is a lightweight jQuery plugin for converting a normal HTML list into a tags manager that allows to communicate with any input field and supports auto complete/suggest (requires jQuery UI).

How to use it:

1. Load jQuery library and the jQuery tag-it plugin's files in the html page.

<link href="css/jquery.tagit.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/tag-it.min.js"></script>

2. The plugin requires jQuery UI library for the autocomplete functionality.

<script src="jquery-ui.min.js"></script>

3. The basic HTML structure for the tags manager.

  <input name="tags" id="demo-input" value="Armenia, Germany" disabled="true">
  <ul id="demo-list"></ul>
  <input type="submit" value="Submit">

4. Create an array of suggested values for the tags manager.

var country_list = ["Afghanistan","Albania","Algeria"];

5. Initialize the tags manager with some options.

  availableTags: country_list,
  // This will make Tag-it submit a single form value, as a comma-delimited field.
  singleField: true,
  singleFieldNode: $('#demo-input')

6. More configuration options with default values.

  allowDuplicates: false,
  caseSensitive: true,
  fieldName: "tags",
  placeholderText: null,
  readOnly: false,
  removeConfirmation: false,
  tagLimit: null,
  availableTags: [],
  autocomplete: {},
  showAutocompleteOnFocus: false,
  allowSpaces: false,
  singleField: false,
  singleFieldDelimiter: ",",
  singleFieldNode: null,
  animate: true,
  tabIndex: null,

7. Callback functions available.

  beforeTagAdded: null,
  afterTagAdded: null,
  beforeTagRemoved: null,
  afterTagRemoved: null,
  onTagClicked: null,
  onTagLimitExceeded: null,
  onTagAdded: null,
  onTagRemoved: null,

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