Add an autocomplete dropdown below your input to suggest possible values in your form. You can populate the list of autocomplete options dynamically as well.

  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
        

Initialization

The data is a json object where the key is the matching string and the value is an optional image url.

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });


  // Or with jQuery

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });
        

Options

Name	Type	Default	Description
data	Object	{}	Data object defining autocomplete options with optional icon strings.
limit	Number	Infinity	Limit of results the autocomplete shows.
onAutocomplete	Function	null	Callback for when autocompleted.
minLength	Number	1	Minimum number of characters before autocomplete starts.
sortFunction	Function		Sort function that defines the order of the list of autocomplete options.

sortFunction

This is the default compareFunction. You can write your own compareFunction by passing in a function with these same 3 parameters. You can read more about how a compareFunction works here.

  // Sort function for sorting autocomplete results
  function (a, b, inputString) {
    return a.indexOf(inputString) - b.indexOf(inputString);
  }
        

To disable sorting and use the values as they appear in the data object, use a falsy value.

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

  var instance = M.Autocomplete.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.autocomplete').autocomplete('methodName');
    $('.autocomplete').autocomplete('methodName', paramName);
  */
        

.open();

Open autocomplete dropdown.

instance.open();
      

.close();

Close autocomplete dropdown.

instance.close();
      

.selectOption();

Select a specific autocomplete options.

Arguments

Element: Element of the autocomplete option.

instance.selectOption(el);
      

.updateData();

Update autocomplete options data.

Arguments

Object: Autocomplete options data object.

instance.updateData({
  "Apple": null,
  "Microsoft": null,
  "Google": 'https://placehold.it/250x250'
});
      

.destroy();

Destroy plugin instance and teardown

instance.destroy();
      

Properties

Name	Type	Description
el	Element	The DOM element the plugin was initialized with.
options	Object	The options the instance was initialized with.
isOpen	Boolean	If the autocomplete is open.
count	Number	Number of matching autocomplete options.
activeIndex	Integer	Index of the current selected option.
dropdown	Dropdown	Instance of the dropdown plugin for this autocomplete.