[Wskazówka] Element „datalist” w formularzach HTML


12 lutego 2016 / Michał Kortas


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.

DATALIST przed wpisaniem danych

Lub wybranie proponowanych odpowiedzi z listy.

Lista rozwijana w DATALIST

Dopasowane podpowiedzi w DATALIST

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:


13 odpowiedzi na “[Wskazówka] Element „datalist” w formularzach HTML”

  1. Comandeer pisze:

    > Owszem, można zrobić to za pomocą jQuery. W sumie czego nie można?
    > Ważniejsze jest jednak pytanie – Ale po co?
    Bo datalist tak bardzo ssą i są tak bardzo niestylowalne i prymitywne, że nic sensownego się z nimi nie zrobi ;)

    Problem polega na tym, że zrobienie poprawnie comboboxa samemu jest po prostu trudne.

    • > Bo datalist tak bardzo ssą i są tak bardzo niestylowalne i prymitywne, że nic sensownego się z nimi nie zrobi ;)

      To prawda, jednak do najprostszych zastosowań wystarczą i są proste w implementacji. Jeśli tylko nie zależy Ci na ekstra wyglądzie… I użytkownikom nie zależy :)

    • Krystian pisze:

      Po moim zapytaniu Pan Michał dodał ten wpis. #dumny Do aplikacji, którą tworzę rzeczywiście wystarczyło, więc pewnie okaże się to pomocne dla niejednej osoby. Zastanawiam się jednak, i tu bardziej już prośba o ewentualną drugą część wpisu o „datalist”, czy (i jeśli tak to jak) da się zaczytywać te propozycje z bazy. Chyba, że Pan Comandeer ma jakiś instruktaż jak zrobić wyszukiwarkę podpowiadającą z bazy danych w jQuery.

    • Deser pisze:

      Hej. Jeśli nie zależy mi na wyglądzie to czy jest sens bawienia się z AJAXem i wysyłania zapytania do bazy danych z każdym kliknięciem w input czy lepiej zastosować datalist? Bo jeśli chodzi o bazę danych to pewnie korzystniej jest załadować wszystkie możliwości od razu.

      • Comandeer pisze:

        To zależy ile tych elementów w tej bazie masz. Jeśli sporo, to prawdopodobnie pobieranie na żywca może być bardziej wydajne. Ale musiałbyś to przetestować.

    • Maciej Lew pisze:

      Przydają się w przypadku korzystania z generatorów statycznych stron, jak Sculpin lub Jekyll, gdy bazy danych po prostu nie ma.

  2. pawelw2 pisze:

    Safari nie ogarnia tematu :(

  3. ksiadz pisze:

    tak swoja drogą zazwyczaj powinno być „dodaj”, dzisiaj są imiona neologizmy, jak na nowoczesny swiat przystało :D
    by niepelnosprawny,org

  4. ucherubinow pisze:

    No w safari niestety nie działa.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *