datalist 태그

datalist 태그는 HTML 폼의 입력 필드 input에 대한 자동 완성을 생성합니다.

자동 완성의 핵심: 사용자가 입력 필드에 무언가를 입력하려고 할 때, 아래에서 사용 가능한 선택 항목 목록을 나타내는 팝업 힌트가 나타납니다. 사용자는 끝까지 입력하지 않고도 제안된 옵션 중 하나를 선택할 수 있습니다.

input 태그에 자동 완성을 연결하려면 list 속성을 지정해야 하며, 여기에는 연결할 datalist 태그의 id 속성을 지정해야 합니다.

선택 옵션은 datalist 태그 내에 저장된 option 태그에 보관됩니다.

예시

입력 필드에 국가를 입력해 봅시다. 먼저 'b'를 입력하면 세 국가로 된 팝업 힌트를 볼 수 있습니다. 그런 다음 'e'를 추가로 입력하면 제안된 국가 수가 두 개로 줄어듭니다:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

예시

이제 option 태그에 value 속성을 추가해 봅시다. 특정 국가를 선택하면 연결된 input에는 국가 이름이 아닌 value 속성의 내용이 들어갑니다:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

예시 . autocomplete 속성의 영향

드롭다운 힌트 목록에는 autocomplete 속성이 영향을 미칩니다. 이 기능이 활성화되어 있으면(기본값이 그러함) datalist 태그에 설정한 값에 사용자가 이전에 이 필드에 입력한 값이 혼합됩니다.

필드에 'Brazil'를 입력하고 제출 버튼을 누르세요(제출하지 않으면 브라우저가 이 국가를 기억하지 않습니다). 그런 다음 이 예시로 돌아와 'b'를 입력하면 나타나는 목록에서 datalist의 3개 국가뿐만 아니라 이전에 입력한 국가도 볼 수 있습니다(또한 'Belarus'라는 단어로 동일한 작업을 수행하면 드롭다운 목록에 이 값이 두 번 나타납니다).

이 기능이 방해가 된다면 autocomplete 속성을 off 값으로 설정하여 비활성화하세요.

위에서 설명한 조작을 예시에서 수행해 보세요:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

함께 보기

폼 필드에 자동 완성을 지정하는 속성,
autocomplete