HTML Academy · 강의

자동 완성을 위한 datalist

datalist 요소로 입력값 제안하기

자동 완성을 위한 datalist은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

데이터 목록이란 무엇인가요

<datalist> 요소는 <input>에 미리 정의된 제안 목록을 제공합니다:

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

데이터 목록과 select 비교

<datalist>와 <select>의 주요 차이점:

데이터 목록 — 자유로운 텍스트 입력 + 제안(사용자가 무엇이든 입력할 수 있음)
select — 제한된 선택(사용자가 목록에서 선택해야 함)

입력을 제한하지 않고 값을 제안하려면 datalist를 사용하십시오.

데이터 목록과 입력 연결

<input>의 list 속성은 <datalist>의 id와 일치해야 합니다:

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

다양한 입력 유형과 데이터 목록

<datalist>는 다양한 입력 유형과 함께 사용할 수 있습니다:

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

데이터 목록의 옵션 레이블

데이터 목록의 옵션에는 화면에 표시되는 레이블과 제출되는 값이 있을 수 있습니다:

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

제안 필터링

사용자가 입력할 때 브라우저가 제안을 필터링합니다:

일치 알고리즘은 브라우저마다 다릅니다
처음부터 일치시키는 브라우저도 있고, 문자열의 어느 위치에서든 일치시키는 브라우저도 있습니다
브라우저의 필터링 동작은 제어할 수 없습니다
사용자 지정 필터링이 필요하다면 ARIA를 사용하는 사용자 지정 자동 완성 구성 요소를 만드십시오

JavaScript로 동적으로 데이터 목록 업데이트

데이터 목록의 옵션을 동적으로 업데이트하십시오:

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

데이터 목록 접근성

데이터 목록의 접근성 고려 사항:

화면 판독기는 제안을 목록 상자로 알립니다
사용자는 화살표 키로 제안을 탐색할 수 있습니다
입력란은 여전히 자유로운 텍스트를 받으므로 유효성 검사가 이를 처리하는지 확인하십시오

브라우저 지원 참고 사항

데이터 목록의 브라우저 지원은 양호하지만 몇 가지 차이가 있습니다:

Chrome, Edge, Firefox: 완전히 지원합니다
Safari: Safari 12.1 이상부터 지원합니다
모바일 브라우저: 대부분 제안을 표시하지만 사용자 인터페이스는 브라우저마다 다릅니다
데이터 목록에 의존하기 전에 항상 대상 브라우저에서 테스트하십시오

데이터 목록을 사용하지 않을 때

다음과 같은 경우에는 데이터 목록이 적합하지 않습니다:

엄격한 유효성 검사가 필요한 경우(사용자가 목록에서 선택해야 함)
사용자 지정 옵션 스타일이 필요한 경우(브라우저가 모든 모양을 제어함)
그룹화가 필요한 경우(datalist에서는 optgroup을 지원하지 않음)

이 경우에는 ARIA role="combobox"를 사용하는 사용자 지정 자동 완성 구성 요소를 사용하십시오.

데이터 목록과 자동 완성 검색 입력 비교

자동 완성이 있는 데이터 목록과 검색 입력을 비교해 보십시오:

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

빠른 확인

입력을 해당 데이터 목록 요소에 연결하려면 어떻게 해야 하나요?

복습: 데이터 목록

데이터 목록 핵심 사항:

<datalist id> + <input list> — id와 list를 일치시켜 연결합니다
사용자는 자유롭게 입력하거나 제안을 선택할 수 있습니다
선택을 제한해야 할 때는 <select>를 사용하십시오
텍스트, 범위, 색상 및 기타 입력 유형과 함께 사용할 수 있습니다
사용자가 입력할 때 제안이 필터링됩니다

자주 묻는 질문

“자동 완성을 위한 datalist” 강의는 무료인가요?

네 — “자동 완성을 위한 datalist” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“자동 완성을 위한 datalist”에서 뭘 배우나요?

datalist 요소로 입력값 제안하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“자동 완성을 위한 datalist” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기