jQuery Tags Input Plugin with Autocomplete Support - Mab Tag Input

jQuery Tags Input Plugin with Autocomplete Support - Mab Tag Input
File Size: 339 KB
Views Total:
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.

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

2. Load the mab.jquery.taginput plugin's files after jQuery library.

<link rel="stylesheet" href="mab-jquery-taginput.css">
<script src="mab-jquery-taginput.js"></script>

3. Create a tags input with pre-populated tags separates with '|'.

<input type="text" class="tag-input" value="cat|dog|catfish|fish">

4. Create a tags input with pre-populated tags separates with '|'.

var tags = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.tag); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [
        { tag: 'dog' },
        { tag: 'cat' },
        { tag: 'fish' },
        { tag: 'catfish' },
        { tag: 'dogfish' }
    ]
});

tags.initialize();

5. Call the plugin on your text field and done.

$('.tag-input').tagInput({

  // tags separator
  tagDataSeparator: '|',

  // allow duplicate tags
  allowDuplicates: false,

  // enable typehead.js
  typeahead: true,

  // tyhehead.js options
  typeaheadOptions: {
      highlight: true
  },

  // typehead dataset options
  typeaheadDatasetOptions: {
    displayKey: 'tag',
    source: tags.ttAdapter()
  }
  
});

Change log:

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

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