Materialize AutoComplete

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

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