datalist 태그

사용자에게 고를 수 있거나 추천하는 선택지를 나타내는 option을 여러개 보여줄 수 있는 태그

<input list="browsers" id="myBrowser" name="myBrowser" />
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Opera">
      <option value="Safari">
      <option value="Microsoft Edge">
    </datalist>

 

input list 속성 값 === datalist id 속성 값

 

select와 다른 점은 사용자가 입력이 가능하고 

자동완성 기능을 제공해서 입력된 값으로 option을 빠르게 찾을 수 있음

 

 

 

참고

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

<datalist> - HTML: Hypertext Markup Language | MDN