jQuery Tags Input Plugin with Autocomplete Support - Mab Tag Input

File Size: 104 KB
Views Total: 18132
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Tags Input Plugin with Autocomplete Support - Mab Tag Input

mab.jquery.taginput is a jQuery plugin used to transform a text field into a nice input field to manage tags.

Perfectly compatible with Twitter's typeahead.js to provide autocomplete / autosuggest functionality for simplifying tag input.

How to use it:

1. Load the necessary jQuery library and the typeahead.js into the html page.

<script src="jquery.min.js"></script>
<script src="typeahead.bundle.min.js"></script>

2. Import necessary modules.

import { ITag, TagInput } from './src/lib';
import './src/css/standard.css';

3. Create a tags input on the page.

<input type="text" class="form-control tag-input" name="example" id="example" placeholder="Enter tags" value="">

4. Initialize the plugin and define your tags in a JS array as follows:

// pre-defined tags
const stringData = [

const instance = new TagInput({
      input: document.getElementById('example'),
      data: stringData

5. All possible plugin options.

input: HTMLElement;
data: T[];
getId: (item: T) => string;
getLabel: (item: T) => string;
newItemFactory?: (label: string) => Promise<T>;
enableSuggestions?: boolean;
minCharsBeforeShowingSuggestions?: number;
maxNumberOfSuggestions?: number;
allowNewTags?: boolean;
tagDataSeparator?: string;
validTagCharacters?: string[];
allowUpperCase?: boolean;
globalCssClassPrefix?: string;
htmlTemplate?: string;
itemTemplate?: string;
suggestionTemplate?: string;
onTagAdded?: (instance: TagInput<T>, added: ITag[], selected: ITag[]) => void;
onTagRemoved?: (instance: TagInput<T>, removed: ITag[], selected: ITag[]) => void;
onTagsChanged?: (instance: TagInput<T>, added: ITag[], removed: ITag[], selected: ITag[]) => void;



  • updated dependencies


  • v0.8.2


  • v0.8.0: Public focus() method


  • Better suggestion ordering


  • Added maxNumberOfSuggestions option to limit the number of suggestions shown at once


  • You can now paste a space/comma/pipe separated string into the input to create multiple tags


  • No longer rely on the fa-times class to wire up tag remove/delete


  • Suggestions now hide when input loses focus


  • Update typeahead.js to 0.11.1


  • Fix issue where instance data was being stored on an element which was subsequently replaced. This meant that the instance was no longer available after the initial instantiation. This fix doesn't directly affect anything yet, but will help with future expansion (e.g. instance method calls).


  • bugfix


  • Tags added by clicking a typeahead suggestion are now correctly styled

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