Navbar mit Suchfeld - MaterializeCss

Question

Ich versuche, eine funktionelle Suchleiste in meiner Nav-Leiste mit Materializecss zu erstellen. Ich kann das Suchsymbol setzen und Text darin schreiben, aber es funktioniert nicht. Ich habe nur den Designteil. Ich bin nicht in der Lage, die jquery zu finden, um das Suchfeld zu initialisieren und es zu arbeiten.

<ul class="right hide-on-med-and-down"> 
         <li> 
          <div class="input-field col s6 s12 white-text"> 
           <i class="white-text small material-icons prefix">search</i> 
           <input type="text" placeholder="search" id="autocomplete-input" class="white-text"> 
          </div> 
         </li> 
</ul> 

Answer 1

Sie haben Autocomplete nicht initialisiert und es gibt Optionen in der JS-Datei. Sie können JS-Code unten überprüfen.

Versuchen Sie, die Demo unten auszuführen, eine Suchleiste mit implementierter Autocomplete. Sie können Apple, Microsoft und Google in der Suchleiste Autovervollständigung erhalten. Für weitere Optionen fügen Sie sie im Datenobjekt bei der Autovervollständigungsinitialisierung hinzu.

var myData={ 
 
     "Apple": null, 
 
     "Microsoft": null, 
 
     "Google": 'https://placehold.it/250x250' 
 
    }; 
 

 
$(document).ready(function() { 
 
    $('input.autocomplete').autocomplete({ 
 
    data: myData, 
 
    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. 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 

 

 

 
<div class="row"> 
 
    <div class="col s12"> 
 
    <div class="row"> 
 
     <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">Search</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>