Materialize AutoComplete

637   06 October 2019

Materialize autocomplete dropdown is an awesome tool for showing possible suggestion to user just below input feild.

To use Materialize autocomplete dropdown, You have to add following Html and js.

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

Vanila Javascript:

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

We wrap our code inside DOM content eventlistener, So that it will run after document loading completed. 


      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": ''

View More

Related Elements