menu
Become a Patron

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.

textsms

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


  var elem = document.querySelector('.autocomplete');
  var instance = M.Autocomplete.init(elem, 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);
  }
        

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);
  */
        
.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.