[HTML] input의 자동완성 기능 datalist

Input 의 자동 완성 기능은 이런 걸 말한다. 

 

Naver 메인 검색창

특정 키워드를 입력하였을 때 

해당 키워드가 포함되어 있는 키워드를 제공해주는 것을 말한다.

 

예전 카카오 코딩 테스트 시에도 해당 기능을 구현하라 는 문제가 나온 적이 있다.

많은 Front-End 개발자들은 대부분 Javascript를 통해 

onChange event를 통해 키워드를 받고 해당 키워드를 API 등으로 DB에 비교해서 List Tag를 띄워주는 식 이었을 것이다.

 

나도 그랬다.

그런데 이번에 새로운걸 발견하면서 

놀라움을 금치 못했다.

 

그것이 바로 DataList다 

바로 코드로 보겠다

 

<label for="movie">Naver 검색창</label>
<input type="text" list="searchOptions"/>
<datalist id="searchOptions">
	<option value="오늘의 날씨"/>
	<option value="오늘의 운세"/>
	<option value="오늘의 집"/>
	<option value="오늘의 일출시간"/>
	<option value="오늘의 미세먼지"/>
	<option value="오늘의 퀴즈"/>
	<option value="퀴즈의 집"/>
	<option value="운세의 날씨"/>
</datalist>

select 구문을 사용해본 사람이라면 저 옵션이 무엇을 뜻하는지 알 것이다.

여기서 필요한 것은

검색 입력을 받을 input과 검색 결과를 띄워줄 datalist 

input의 list 속성과 이를 연결해줄 datalist의 id를 매칭 시켜주면 된다.

 

저 HTML을 실행하면 다음과 같이 된다.

---

Naver 검색창

---

귀찮은 작업이 훨씬 수월해졌다. 

이제 굳이 입력 이벤트를 받아 해결할 필요없이 

datalist에 data만 뿌려줘도 구현할 수 있다.

 

많은 사람들이 보고 웹개발에 수월해졌으면 한다.