Autocomplete Content

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_Autocomplete

<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

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:

Copy

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