title: Materializecss Autocomplete Input
body: <p>Why autocomplete inputbox its working anybody have any idea to fix it,
  My code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
  &lt;title&gt;Site Name&lt;/title&gt;
  
  &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"&gt;
  
  &lt;link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;nav class="blue"&gt;
  
      &lt;div class="nav-wrapper"&gt;
  
        &lt;a href="/index" class="brand-logo"&gt;Site Name&lt;/a&gt;
  
        &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
  
        &lt;ul class="right hide-on-med-and-down"&gt;
  
          &lt;li&gt;&lt;a href="/index"&gt;Index&lt;/a&gt;&lt;/li&gt;
  
  
        &lt;/ul&gt;
  
        &lt;ul class="side-nav" id="mobile-demo"&gt;
  
          &lt;li&gt;&lt;a href="/index"&gt;Index&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
  
      &lt;/div&gt;
  
    &lt;/nav&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- 33 KB --&gt;
  
  &lt;style&gt;
  .loader {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 10;
      background: url('/images/480.gif') 50% 50% no-repeat #fff;
      opacity: 100%;
  }
  &lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(window).load(function() {
  setTimeout(function(){
    $('.loader').remove();
  }, 3000);
  });
  &lt;/script&gt;
  &lt;div class="loader"&gt;&lt;center&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Please Wait.&lt;br&gt;&lt;/center&gt;&lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col s12"&gt;
        &lt;div class="row"&gt;
          &lt;div class="input-field col s12"&gt;
            &lt;i class="material-icons prefix"&gt;textsms&lt;/i&gt;
            &lt;input type="text" id="autocomplete-input" class="autocomplete"&gt;
            &lt;label for="autocomplete-input"&gt;Autocomplete&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;br&gt;
  
  &lt;script src="//code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
   $(".button-collapse").sideNav();
  &lt;/script&gt;
  &lt;script&gt;
    $('.button-collapse').sideNav({
        menuWidth: 300, // Default is 300
        edge: 'right', // Choose the horizontal origin
        closeOnClick: true, // Closes side-nav on &lt;a&gt; clicks, useful for Angular/Meteor
        draggable: true, // Choose whether you can drag to open on touch screens,
        onOpen: function(el) { /* Do Stuff* / }, // A function to be called when sideNav is opened
        onClose: function(el) { /* Do Stuff* / }, // A function to be called when sideNav is closed
      }
    );
  &lt;/script&gt;
  &lt;script&gt;
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
      onAutocomplete: function(val) {
        // Callback function when value is autcompleted.
      },
      minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
    });
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I tryed to much methods but no results, i also change the materializecss version of stylesheet and the script but again dont worked, i also tryed other autocomplete but dont work i tryed this <a href="https://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/" rel="nofollow noreferrer">https://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/</a> but dont work with MaterializeCSS.</p>