Na forum webroad.pl pojawił się z pozoru prosty, lecz ciekawy temat, który chciałbym krótko poruszyć w to piątkowe popołudnie. Otóż jeden z Czytelników bloga zapytał o pomoc we wdrożeniu czegoś w rodzaju uzupełniania treści w kontrolkach formularzy (autocomplete) za pomocą jQuery.

Owszem, można zrobić to za pomocą jQuery. W sumie czego nie można?

Ważniejsze jest jednak pytanie – Ale po co?

Podpowiedzi w input’ach w HTML5

HTML5 zawiera w sobie ciekawy element <datalist>, który działa bardzo podobnie do natywnych podpowiedzi ostatnio wpisanych fraz w kontrolkach formularzy, z tą różnicą, że sami możemy zasugerować przeglądarce, co dokładnie ma podpowiedzieć.

Zobacz demo DATALIST

Spójrz na poniższą implementację <datalist> w kodzie HTML.

Aby odnieść się do niej w polu tekstowym, czy liście rozwijanej, wystarczy użyć następującego kodu…

… gdzie parametr list będzie wskazywał na identyfikator przygotowanej listy.

Kontrolki z <datalist> w praktyce

Efektem tego prostego kodu, będzie pole, umożliwiające wpisanie wartości.

Lub wybranie proponowanych odpowiedzi z listy.

Aby sprawdzić działanie powyższego przykładu, zamieszczam go do podglądu.

Zobacz demo DATALIST

Dostępność funkcji w przeglądarkach

Praktycznie rzecz biorąc, wszystkie nowsze wersje popularnych przeglądarek wspierają <datalist>. Więcej szczegółów znajdziesz na stronie caniuse.com/#feat=datalist.

Tagi: datalist • featured • formularze • html5