select-option과 datalist의 차이

datalist와 option의 차이

• datalist는 추천하는 선택지를 나타내는 option 여러개를 보여줄 수 있으면서 input으로 자유롭게 입력할 수 있다.

datalist 사용방법

• datalist에 id 주고, 그 id를 input의 list속성에 value로 제공한다.

<input list="some-id" /> 
<datalist id="some-id">
  <option value="img1.jpg">img1</option>
  <option value="img2.jpg">img2</option>
  <option value="img3.jpg">img3</option>
</datalist>

예시

See the Pen html datalist by JEONG (@cona) on CodePen.