jQuery Tags Input Plugin with Autocomplete Support Mab Tag Input - Free Download jQuery Tags Input Plugin with Autocomplete Support - Mab Tag Input

Free Download jQuery Tags Input Plugin with Autocomplete Support – Mab Tag Input

Posted on

This time I will share jQuery Plugin and tutorial about jQuery Tags Input Plugin with Autocomplete Support – Mab Tag Input, hope it will help you in programming stack.

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

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.

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

2. Import necessary modules.

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

3. Create a tags input on the page.

1 <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:

01 // pre-defined tags
02 const stringData = [
03     'dog',
04     'cat',
05     'fish',
06     'catfish',
07     'dogfish',
08     'bat'
09 ];
10  
11 const instance = new TagInput({
12       input: document.getElementById('example'),
13       data: stringData
14 });

5. All possible plugin options.

01 input: HTMLElement;
02 data: T[];
03 getId: (item: T) => string;
04 getLabel: (item: T) => string;
05 newItemFactory?: (label: string) => Promise<T>;
06 enableSuggestions?: boolean;
07 minCharsBeforeShowingSuggestions?: number;
08 maxNumberOfSuggestions?: number;
09 allowNewTags?: boolean;
10 tagDataSeparator?: string;
11 validTagCharacters?: string[];
12 allowUpperCase?: boolean;
13 globalCssClassPrefix?: string;
14 htmlTemplate?: string;
15 itemTemplate?: string;
16 suggestionTemplate?: string;
17 onTagAdded?: (instance: TagInput<T>, added: ITag[], selected: ITag[]) => void;
18 onTagRemoved?: (instance: TagInput<T>, removed: ITag[], selected: ITag[]) => void;
19 onTagsChanged?: (instance: TagInput<T>, added: ITag[], removed: ITag[], selected: ITag[]) => void;

Changelog:

2021-03-22

  • Better suggestion ordering

2021-03-21

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

2021-02-28

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

2021-02-07

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

2020-12-12

  • Suggestions now hide when input loses focus

2017-05-18

  • Update typeahead.js to 0.11.1

2016-10-26

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

2016-06-06

  • bugfix

2016-06-03

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