HTML은 데이터 목록 요소를 알아야 합니다.

HTML<datalist> 요소는 매우 강력한 입력 요소입니다. 드롭다운 옵션이 있는 입력 필드로 작동하지만 여기에 자동 완성 기능이 함께 제공됩니다. 사용자는 입력 필드에 작성할 때 미리 정의된 옵션의 드롭다운 목록을 볼 수 있습니다!
<datalist> 요소에는 사용자가 사용할 수 있는 옵션을 나타내는 다양한 <option> 요소가 포함되어 있습니다.

그것은 일종의 <select> 드롭다운처럼 느껴지지만 스테로이드입니다. 사용자가 자동완성 옵션을 입력하고 받을 수 있기 때문입니다.

<데이터 목록> 사용 방법

<label for="animals">What is your favorite animal?:</label>
<input list="animals" name="animal" id="animal">

<datalist id="animals">
  <option value="Dog">
  <option value="Cat">
  <option value="Horse">
  <option value="Donkey">
  <option value="Bunny">
</datalist>

<datalist>의 ID와 <input> 필드의 목록 속성 값을 확인하십시오.

HTML은 다음으로 번역됩니다.



입력 필드를 클릭하면 내가 제공한 생성된 옵션 목록이 이미 표시됩니다. 이제 입력 필드에 입력을 시작하십시오! 아시다시피 입력을 시작하면 목록이 축소됩니다. 입력한 내용에 따라 사용 가능한 옵션만 표시됩니다.

따라서 기본적으로 HTML은 테이블에 자동 완성을 제공하는 입력 필드를 제공합니다.

이것의 장점은 모든 브라우저에서 작동한다는 것입니다! 데스크톱과 모바일 모두.

결론

<datalist> 요소에 대해 배웠을 때 나는 매우 기뻤습니다! 거의 모든 프로젝트에서 자동 완성 기능으로 사용자 지정 드롭다운 목록을 만드는 데 몇 시간을 소비해야 했습니다. HTML 태그가 있다는 것을 결코 알지 못했습니다!
<datalist> 요소에 대해 어떻게 생각하는지 궁금합니다. 알려줘요!