Wypełnianie formularzy może być czasochłonne. Ważne jest, aby użytkownicy mieli wiele opcji, ale jednocześnie mogli swobodnie pisać. Element datalist (który właśnie trafił do Chrome Canary w wersji M20) sprawia, że jest to bardzo proste.
Dzięki datalist Twoja aplikacja może zdefiniować listę sugerowanych wyników, spośród których użytkownicy mogą wybierać. Użytkownik może wybrać opcję z listy lub wpisać dowolny tekst.
Opcje można sparować z elementem datalist, podając jego id w atrybucie list elementu input:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist jest powszechnie dostępna w najnowszych wersjach przeglądarek Firefox, Opera i Internet Explorer (po wersji 10). Nie musisz się więc zbytnio martwić kompatybilnością, ale jeśli chcesz mieć pewność, że funkcja działa we wszystkich przeglądarkach, wykonaj te czynności:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Jeśli w Twojej przeglądarce jest dostępne datalist, wszystko pod datalist, z wyjątkiem elementów option, będzie ukryte. Jeśli używasz tego mechanizmu zastępczego, upewnij się, że Twój serwer rejestruje zarówno „fruit_sel”, jak i „fruit” jako parametry zapytania.