Easy Tags Manager Widget With Autocomplete Support - Tag-It

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).

See Also:

• 10 Best Tags Input Plugins In jQuery & Vanilla JavaScript

How to use it:

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

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Tag-It Plugin -->
<link href="css/jquery.tagit.css" rel="stylesheet" />
<script src="js/tag-it.min.js"></script>

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

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

3. The basic HTML structure for the tags manager.

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

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.

$('#demo-list').tagit({
  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.

$('#demo-list').tagit({

  allowDuplicates: false,
  caseSensitive: true,
  fieldName: "tags",
  placeholderText: null,
  readOnly: false,

  // Require confirmation to remove tags
  removeConfirmation: false,

  // Max number of tags allowed (null for unlimited)
  tagLimit: null,

  // Used for autocomplete
  availableTags: [],

  // Use to override or add any options to the autocomplete widget
  autocomplete: {},

  // Shows autocomplete before the user even types anything
  showAutocompleteOnFocus: false,

  // When enabled, quotes are unneccesary for inputting multi-word tags
  allowSpaces: false,

  // Use a single hidden field for the form, rather than one per tag. 
  // It will delimit tags in the field with singleFieldDelimiter.
  singleField: false,
  singleFieldDelimiter: ",",

  // Set this to an input DOM node to use an existing form field.
  singleFieldNode: null,

  // Whether to animate tag removals or not
  animate: true,

  // Optionally set a tabindex attribute on the input that gets
  tabIndex: null,
  
});

7. Callback functions available.

$('#demo-list').tagit({
  beforeTagAdded: null,
  afterTagAdded: null,
  beforeTagRemoved: null,
  afterTagRemoved: null,
  onTagClicked: null,
  onTagLimitExceeded: null,
});

8. API methods.

// Returns an array of the text values of all the tags
$("#demo-list").tagit("assignedTags");

// Adds new tag
$("#demo-list").createTag(tagLabel, additionalClass);

// Called before tag is created
$("#demo-list").preprocessTag(function, Callback);

// Finds the tag with the label tagLabel and removes it.
$("#demo-list").removeTagByLabel(tagLabel, animate);

// removes all tags
$("#demo-list").tagit("removeAll");

Changelog:

2022-10-25

• Bugfix

---

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