추천 목록: <input list='fruits'>

핵심 개념

입력창에 글자를 치면 미리 준비해둔 추천 단어들이 쪼르르 나오는 자동 완성 기능이에요.

코드 분석

HTML5📋 코드 (9줄)

<p>좋아하는 과일을 입력하세요 (추천: 사과, 바나나, 포도):</p>
<input list='fruits' id='fruitInput'>
<datalist id='fruits'>
  <option value='사과'>
  <option value='바나나'>
  <option value='포도'>
  <option value='메론'>
</datalist>
<button onclick='alert("선택한 과일: " + document.getElementById("fruitInput").value)'>확인</button>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 datalist 자동완성 코드에서
검색 알고리즘(시작 매칭 vs 포함 매칭),
키보드 접근성 문제를 찾아 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

datalist로 도시 검색·태그 입력·자주 쓰는 키워드 자동완성을
실전 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 datalist 구현을 분석해서
모바일 동작, 큰 데이터셋 성능,
커스터마이징 한계를 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 datalist 네이티브가
react-select, downshift 같은 라이브러리 대비
어디까지 대체 가능한지 솔직히 알려줘.

⭐ 이것만 기억하세요

추천 목록: <input list='fruits'>는 이 3가지만 확실히 잡으세요

1.select 태그는 미리 정해진 옵션만 선택 가능하지만, 사용자가 직접 타이핑할 수는 없습니다

2.datalist는 input에 추천 목록을 연결해서 자동완성을 제공하면서도 자유 입력을 허용합니다

3.다음 챕터에서 무거운 연산을 메인 스레드 밖에서 처리하는 Web Workers를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.23 — 질문하거나 답변을 확인하세요

→

진행도 23 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)