Datalist do autouzupełniania
Podpowiadanie wartości za pomocą elementu datalist
Datalist do autouzupełniania to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co to jest datalist?
Element <datalist> udostępnia listę wstępnie zdefiniowanych podpowiedzi dla elementu <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 -->datalist a select
Najważniejsza różnica między <datalist> a <select>:
- datalist — dowolny tekst i podpowiedzi (użytkownik może wpisać cokolwiek)
- select — ograniczony wybór (użytkownik musi wybrać opcję z listy)
Używaj datalist, gdy chcesz sugerować wartości, ale nie ograniczać danych wejściowych.
Łączenie datalist z input
Atrybut list elementu <input> musi odpowiadać atrybutowi id elementu <datalist>:
<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>datalist z różnymi typami input
Element <datalist> działa z wieloma typami input:
<!-- 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>label elementu option w datalist
Opcje w datalist mogą mieć widoczną etykietę oraz wartość wysyłaną:
<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 -->Filtrowanie podpowiedzi
Przeglądarka filtruje podpowiedzi podczas pisania przez użytkownika:
- Algorytm dopasowywania różni się w zależności od przeglądarki
- Niektóre przeglądarki dopasowują tekst od początku, a inne w dowolnym miejscu ciągu znaków
- Nie można kontrolować sposobu filtrowania stosowanego przez przeglądarkę
- Aby użyć własnego filtrowania, utwórz niestandardowy komponent autouzupełniania z ARIA
Dynamiczny datalist z JavaScript
Dynamicznie aktualizuj opcje datalist:
<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>Dostępność datalist
Aspekty dostępności elementu datalist:
- Czytniki ekranu ogłaszają podpowiedzi jako listę listbox
- Użytkownicy mogą nawigować po podpowiedziach za pomocą klawiszy strzałek
- Element input nadal akceptuje dowolny tekst — upewnij się, że walidacja go obsługuje
Uwagi dotyczące obsługi przez przeglądarki
Obsługa datalist przez przeglądarki jest dobra, ale występują pewne różnice:
- Chrome, Edge, Firefox: pełna obsługa
- Safari: obsługa od wersji Safari 12.1+
- Przeglądarki mobilne: większość wyświetla podpowiedzi, ale interfejs może się różnić
- Zawsze testuj w docelowych przeglądarkach, zanim zaczniesz polegać na datalist
Kiedy nie używać datalist
Datalist nie jest najlepszym rozwiązaniem, gdy:
- Potrzebujesz ścisłej walidacji (użytkownik musi wybrać opcję z listy)
- Potrzebujesz niestandardowego stylowania opcji (przeglądarka kontroluje cały wygląd)
- Potrzebujesz grupowania (optgroup nie jest obsługiwany w datalist)
W takich przypadkach użyj niestandardowego komponentu autouzupełniania z ARIA role="combobox".
datalist a pole wyszukiwania
Porównanie datalist z polem wyszukiwania wyposażonym w autouzupełnianie:
<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 -->Szybkie sprawdzenie
Jak połączyć element input z jego elementem datalist?
Podsumowanie: datalist
Najważniejsze informacje o datalist:
<datalist id>+<input list>— połączone za pomocą zgodnych wartości id/list- Użytkownik może swobodnie pisać lub wybrać podpowiedź
- Używaj
<select>, gdy wybór musi być ograniczony - Działa z tekstem, zakresem, kolorem i innymi typami input
- Podpowiedzi są filtrowane podczas pisania przez użytkownika
Często zadawane pytania
Czy lekcja „Datalist do autouzupełniania” jest bezpłatna?
Tak — pełny tekst „Datalist do autouzupełniania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Datalist do autouzupełniania”?
Podpowiadanie wartości za pomocą elementu datalist Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Datalist do autouzupełniania”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Menu rozwijane Select i option
- Textarea do wprowadzania tekstu w wielu wierszach
- Grupy pól wyboru i przycisków radiowych
- Datalist do autouzupełniania