Materialize AutoComplete


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.

HTML Code
<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
     </div>
  </div>
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. 

Jquey

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


View More

Related Elements