검색 상자가있는 Navbar - MaterializeCss

Question

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 코드를 확인할 수 있습니다.

아래의 데모를 실행 해보십시오. 자동 완성 기능이 구현 된 검색 창입니다. 검색 창에 Apple, Microsoft 및 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>