html 입력 자동 완성 datalist 활용

html의 datalist 태그를 사용하면, 사용자의 입력을 자동완성시켜주는 기능을 쉽게 구현할 수 있어서 이를 소개해 드립니다.

javascript로 어렵게 구현하던 기능을 datalist로 쉽게 구현이 가능하게 해 줍니다.

사용방법 예시

<label for="browser">선호하는 웹브라우저를 선택하세요.</label>
<input list="browsers" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

아래와 같이 문자 'e'를 입력한 경우, 해당 문자를 포함하지 않은 'Safari'를 제외한 항목만 보여지며, 사용자의 입력이 정확히 입력 되도록 유도 됩니다.