Materialize Tags input

Just add data-role="materialtags" to your input field to automatically change it to a tags input field.

• Show code

Just add data-role="materialtags" to your input field to automatically change it to a tags input field.

• Show code

Typeahead is not included in MaterializeCSS and Materialize Tags. Therefore, if you which to use the functionality offered by TypeAhead, you will have to include your own typeahead library.
The original version of typeahead.js was developed by twitter, unfortunately this project is unmaintained for more than two years. Thus, we have choosen to use the forked project by the CoreJavascript Team: Go to Github Repository.

All functions works seamlessly with the latest version: v1.2.1.
Warning: New functionalities (e.g. autoselect) are only available using TypeAhead 1.2.0 or more recent.

The latest release file can be download from this link: go to GitHub

Typeahead allows you to propose a list of valid tags that the user can choose. Very useful to recommend a list of values to user or restrict him to certain values.

Here is an example below:

• Show code

                              
      <input type="text" value="Amsterdam,Washington"/>
      <script>
          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()
              }
          });
      </script>
                              

In addition to proposing a list of values, Typeahead can highlight the matching pattern in the list of recommendation displayed.

Here is an example below:

• Show code

                              
      <input type="text" value="Amsterdam,Washington"/>
      <script>
          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: [{
      		highlight   : true,
      	},
      	{
              name       : 'citynames',
              displayKey : 'name',
              valueKey   : 'name',
              source     : citynames.ttAdapter()
      	}]
          });
      </script>
                              

In addition to proposing a list of values and highlight the matching pattern, Typeahead can automatically select the first proposition.

Here is an example below:

• Show code

                              
      <input type="text" value="Amsterdam,Washington"/>
      <script>
          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: [{
      		autoselect   : true,
      		highlight   : true,
      	},
      	{
              name       : 'citynames',
              displayKey : 'name',
              valueKey   : 'name',
              source     : citynames.ttAdapter()
      	}]
          });
      </script>
                              

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.

• Show code

                              
      <input type="text" />
      <script>
          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" });
      </script>