HTML5 DataList

<datalist> 요소는 입력 필드 (<input>)와 함께 사용되어 사용자가 값을 입력할 때 미리 정의한 옵션들을 드롭다운 목록으로 제공하는 HTML5 요소이다.

사용자가 값을 입력하는 동안에도 드롭다운 목록의 값들을 보여줌으로써 사용자의 편의성을 높이고 입력 오류를 줄일 수 있다.  jquery autocomplete 와 흡사

1. 연동되는 인풋 컨트롤: <datalist> 요소는 <input> 요소의 list 속성과 연동됩니다. 사용자가 <input> 요소에 값을 입력하면 <datalist>에서 정의한 옵션 중에서 일치하는 값을 드롭다운으로 보여줍니다.
2. 사용자 선택 가능: 사용자는 드롭다운에서 제공되는 옵션 중 하나를 선택하여 입력 필드에 삽입할 수 있습니다. 이로써 사용자의 편의성을 높일 수 있습니다.
3. 커스텀 옵션: <datalist> 요소에 나열된 값 이외에도, 사용자가 직접 입력할 수 있습니다. 이를 통해 입력 필드는 제시된 값 외에도 다른 값을 입력할 수 있습니다.

[사용예]

<label for="browser">Choose a browser from the list:</label>
<input list="browsers" id="browser" name="browser" />

<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> 요소의 type은 text로 설정되어 있고, list 속성은 browsers로 설정되어 있습니다. 이렇게 하면 사용자가 입력 필드에 값을 입력하면, <datalist> 요소에서 정의한 옵션 값들 중에서 입력과 일치하는 값이 드롭다운으로 표시됩니다.

사용자는 드롭다운에서 제공되는 옵션 중에서 선택하거나, 직접 값을 입력할 수 있습니다. 만약 입력 필드에 드롭다운 목록에 없는 값이 입력되면, 브라우저는 해당 값을 입력 필드에 그대로 표시합니다.

<datalist> 요소를 사용함으로써 다양한 입력 폼에서 사용자의 편의성을 높일 수 있습니다. 예를 들어, 검색어 입력, 국가 선택, 카테고리 선택 등 다양한 상황에서 사용할 수 있습니다. 그러나 <datalist> 요소는 모든 브라우저에서 완벽하게 지원되지는 않을 수 있으므로, 사용 시 브라우저 호환성을 고려하는 것이 중요합니다.

 

 

실제 구현 및 테스트는 아래에서 확인 (브라우저 호환성 포함)

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