🔎 간편한 자동 완성/HTML5만으로 입력 제안 | 데이터 목록 태그

사용자가 입력에 무언가를 입력할 때 사용자에게 몇 가지 옵션을 제안하고 싶을 때가 있습니다. 사람들이 찾는 인기 검색 카테고리나 태그가 있을 수 있습니다. 물론 API 기반 기능을 구현할 수 있습니다. 또는 기능을 빠르게 시작하고 실행하려는 경우 datalist 태그를 사용하지 않는 이유는 무엇입니까?


내가 datalist 태그를 가지고 장난치는 것을 보고 싶다면 여기에서 보거나 계속 스크롤하여 읽을 수 있습니다.

작동 중인 동영상datalist.

The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. — MDN

데이터 목록은 사용자가 제안된 옵션을 선택하거나, 입력할 때 제안을 보거나, 자신의 옵션을 추가할 수 있는 일반 입력과 선택 필드 사이의 하이브리드 역할을 합니다.

어떻게 작동합니까?
datalist 태그를 일반 old<input type="text">에 추가하는 방법을 간단한 예(아마도 가장 일반적으로 사용하는 것)로 보여드리겠습니다.datalist는 내부 옵션을 사용하는 선택 태그와 거의 동일하게 작동합니다.

<input type="text" id="programming_language" list="languages"/>
<datalist id="languages">
 <option value="JavaScript"></option>
 <option value="Python"></option>
 <option value="Java"></option>
 <option value="HTML">Stop being a troll</option>
</datalist>

여기에서 볼 수 있는 중요한 점은 입력을 채우는 데 사용할 datalist의 ID를 지정하는 옵션으로 입력이 목록을 사용한다는 것입니다.



내부 메모를 추가할 수도 있으므로 이 예에서 누군가가 좋아하는 프로그래밍 언어로 "Html"을 입력하기 시작하면 우리를 트롤링하지 말라고 하는 작은 메모를 표시할 수 있습니다...
datalist에 대한 또 다른 정말 멋진 점은 엄격하게 텍스트 유형의 입력에만 국한되지 않는다는 것입니다. 이를 사용하여 날짜 및 색상 태그를 포함한 거의 모든 태그에 몇 가지 제안을 추가할 수 있습니다.

다음은 색상 선택기와 함께 사용하는 예입니다.

<label for="pick_color">Pick a color</label>
<input type="color" id="pick_color" list="colors"/>
<datalist id="colors">
 <option value="#155AF0"></option>
 <option value="#F107BA"></option>
 <option value="#2B2B2B"></option>
</datalist>

저는 해킹을 통한 학습을 ​​좋아합니다. 이 CodePen으로 바로 이동하여 직접 사용해 보세요.



작동 중인 데이터 목록 태그의 예
이것을 언제 사용합니까? 이렇게 하면 DOM 요소가 추가되므로 제안할 가치가 있는 전체 데이터베이스가 없을 때 이것을 사용하는 것이 좋습니다(어쩌면 50개 미만이 저에게는 좋은 경험 법칙입니다).

다음 편까지 즐거운 코딩 하세요! ❤


날 따라와

구독하기