자동완성 기능은 종종 라이브러리나 사용자 정의 JavaScript로 수행됩니다. 하지만 HTML의 <datalist> 요소를 사용하면 최소한의 노력으로 자동 제안 입력을 만들 수 있습니다.

HTML :

<input type="text" list="suggestions" placeholder="선택하세요...">
<datalist id="suggestions">
  <option value="웹학교">
  <option value="영카트 다국어">
  <option value="구인구직 솔루션">
</datalist>

CSS : 

.container {
  width: 300px; 
  display: block; 
}

input {
  padding: 10px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

웹학교 무료강좌 / 웹학교 컨텐츠몰

PHP포탈 / 구인구직 솔루션

By 웹학교