Material Design Tags Input Plugin with jQuery - Materialize Tags

Materialize Tags is a modern jQuery plugin used to create a nice-looking Material Design styled tag manager using Materialize framework. Works nicely with Twitter's typehead JS library.

How to use it:

1. Include the necessary jQuery library and Materialize front-end framework on your web page.

<link rel="stylesheet" href="materialize.min.css">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

2. Load the jQuery Materialize Tags plugin's stylesheet and JavaScript on the web page.

<link rel="stylesheet" href="materialize-tags.min.css">
<script src="materialize-tags.min.js"></script>

3. Create a basic tag manager by add the data-role="materialtags" attribute to an existing input field.

<input type="text" value="tag1,tag2,tag3" data-role="materialtags">

4. Integrate with typehead.js library. You'll have to include the typehead.js library.

var citynames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
      url: 'assets/citynames.json',
      filter: function(list) {
        return $.map(list, function(cityname) {
          return { name: cityname };
        });
      }
    }
});

citynames.initialize();

$('input').materialtags({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

5. Add objects as tags. Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.

<input type="text">

var cities = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'assets/cities.json'
});
cities.initialize();

var elt = $('input');
elt.materialtags({
    itemValue: 'value',
    itemText: 'text',
    typeaheadjs: {
      name: 'cities',
      displayKey: 'text',
      source: cities.ttAdapter()
    }
});
elt.materialtags('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
elt.materialtags('add', { "value": 4 , "text": "Washington" , "continent": "America" });
elt.materialtags('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
elt.materialtags('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
elt.materialtags('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });

6. All default options.

tagClass                    : tagClass,
itemValue                   : itemValue,
itemText                    : itemText,
itemTitle                   : itemTitle,
freeInput                   : true,
addOnBlur                   : true,
maxTags                     : undefined,
maxChars                    : undefined,
confirmKeys                 : [tabKey,enterKey, 44, commaKey],
onTagExists                 : onTagExists,
trimValue                   : true,
allowDuplicates             : false,
allowTabOnEmpty             : false,
deleteTagsOnBackspace       : true,
deleteTagsOnDeleteKey       : true,
MoveTagOnLeftArrow          : true,
MoveTagOnRightArrow         : true,
autoselect                  : false,
CapitalizeFirstLetterOnly   : false,

Change log:

2018-01-07

• v1.2.3: Added the option allowTabOnEmpty with default value to false

2017-09-27

• v1.2.0: more bugs fixed.

2017-09-26

• v1.1.0: Fixed Error with addOnBlur not clearing text input.fixed

2017-09-22

• Cleaning "tabs" to "spaces" and updates

2016-11-02

• prefilled parameter removed

2016-10-27

• Small Fixes - Active class pb

2016-10-26

• New Features (highlight + autoselect + etc.) + last version of Materialize + Typeahead + hot fixes

2015-11-28

• Add support for Materialize v0.97.3

2015-06-04

• label active class toggle fixed

---

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