Materialize Autocomplete

<!DOCTYPE html>
  <html>
  <head>
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
 <body> 
  <div class="input-field col s12">
          <i class="material-icons prefix">search</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
  </div>
 <script>
$(document).ready(function(){
$('input.autocomplete').autocomplete({
    data: {
      "Mango": null,
      "Apple": null,
      "Banana": null
    }
  });
});
 </script>
 </body>
  </html>