Wypełnianie formularzy czasem wydaje się uciążliwe. Ważne jest zapewnienie użytkownikom możliwości wyboru, a jednocześnie umożliwienie im swobodnego pisania. Element datalist (który właśnie został udostępniony w Chrome Canary (M20) sprawia, że to proste).
Korzystając z funkcji datalist, Twoja aplikacja może zdefiniować listę sugerowanych wyników, które użytkownicy powinni wybrać. Mogą wybrać opcję z listy lub wpisać dowolny tekst.
Opcje można połączyć z datalist, określają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ępny w najnowszych przeglądarkach Firefox, Opera i Internet Explorer od wersji 10. Nie musisz się więc przejmować zgodnością. Jeśli jednak chcesz mieć pewność, że wszystko działa w różnych przeglądarkach, wypróbuj te rozwiązania:
<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 datalist jest dostępny w przeglądarce, wszystko, co znajduje się pod datalist z wyjątkiem elementów option, będzie ukryte. Jeśli korzystasz z tego mechanizmu kreacji zastępczych, upewnij się, że serwer rejestruje jako parametry zapytania zarówno „fruit_sel”, jak i „fruit”.