{ Html만으로 가능한 기능 } 자동완성

Html만으로도 자동완성 기능을 구현할 수 있습니다.

 

자동완성?? 어떻게 해야되지?? 

막상 코딩을 하려고 해보면 검색하지 않고서는 쉽게 구현할 수 없었죠.

Js로 Auto Complete를 구현하려면 유저가 입력값을 입력하면 검색어를 필터하고 필터링하려면 어떠한 ..

로직이 필요하고..등등.. 뭔가 복잡하죠.

https://shplab.tistory.com/entry/jQuery%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-Autocomplete-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%B5%EC%85%98-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0

[jQuery] 제이쿼리 Autocomplete(자동완성) 사용법 및 옵션 살펴보기

 

하지만 이제 <datalist> 만 이용하면 Auto Complete(자동완성) 기능을 구현할 수 있습니다.

 

datalist를 사용하려면  INPUT(입력값)을 가져와야하고, 그 다음. datalist를 만들고  ID를 부여해야합니다.

 <label for="movie">가장 신뢰하는 뉴스채널은?</label>   
  <input type="text" list="news_options">   
  <datalist id="news_options">       
    <option value="MBC"></option>       
    <option value="KBS"></option>       
    <option value="KBS2"></option>       
    <option value="SBS"></option>       
    <option value="JTBC"></option>       
    <option value="TVN"></option>       
    <option value="CHANELA"></option>   
  </datalist>

 

소스에 보면 input의 "list="news_options" 과 datalist id="news_options"이 같아야 합니다.

그리고 option값을 나열해주면 자동완성 준비는 끝..

 

자 실행해보면..

 

"KB" 입력해보니 필터링을해주네요.

 

기본적으로 대소문자 관계없이 찾아주게되고.. 중성글짜를 입력하더라도 아래와 같이 찾아주게됩니다.

 

 

참 쉽죠~~~~잉~~?