検索ボックスのあるNavbar - MaterializeCss

Question

私はnavizバーでmaterializecssを使用して機能的な検索バーを作成しようとしています。私は検索アイコンを置いてその中にテキストを書くことができますが、それは動作しません。私はデザインの部分しか持っていません。私は検索ボックスを初期化し、それを動作させるjqueryを見つけることができません。

<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

オートコンプリートを初期化しておらず、JSファイルにオプションがあります。 下記のJSコードを確認できます。

以下のデモを実行してください。検索バーには、実装されたオートコンプリートがあります。 アップル、マイクロソフト、Googleを検索バーのオートコンプリートにすることができます。 さらに多くのオプションを使用するには、オートコンプリート初期化の下でデータオブジェクトに追加します。答えが遅れて申し訳ありません

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>