HTML <datalist> 태그 속성

개요 

HTML 태그 중 select 태그와 하위 태그인 option을 이용해 리스트를 셀렉하고 그 value를 넘기는 경우가 상당히 많을 것이다.

이때 리스트의 양이 많아 스크롤을 쭉 해야하거나, 한눈에 찾기 어렵다면 유저입장에서 여간 불편한 일이 아닐 수 없다.

 

이를 해결하기 위해 다양한 방법이 있겠지만, 그 중 HTML5 에서 기본으로 제공하는 태그인 datalist 를 이용해 적용하기로 해보겠다.

 

<input type='text' list='list'/>
<datalist id='list' name='list'>
	<option value='1'>하나</option>
    <option value='2'>두울</option>
    <option value='3'>세엣</option>
    <option value='4'>네엣</option>
</datalist>

datalist 란?

<select> 태그와 유사한 태그로 <datalist> 로 표기한다. 하위 태그로 <option>을 이용해 셀렉할 수 있고, 검색 혹은 자동완성기능등이 있어 option 태그가 많을 때 찾는 용도로 유용하게 사용이 가능하다. 

 

select 태그와 다른점이라면, 검색기능과 input 태그를 주체로 사용한다는 점이다.

datalist는 option태그를 담는 용도로만 사용하고, 그 값을 view 로 표현하는 데 input 태그의 list 를 이용해 매핑하여 사용한다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist

위 사진처럼 input 태그에 option 태그를 붙이는 식으로 text를 사용해 option의 내용을 검색할 수도 있으며, 

<option> 태그에 label='크롬' 이런식으로 네이밍을 통해 보다 쉽게 해당 option의 밸류와 닉네임을 알 수 있다.