HTML5 & CSS3

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

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.

<datalist id="imiona">
	<option value="Ada">
	<option value="Bartek">
	<option value="Celina">
	<option value="Damian">
	<option value="Ewa">
	<option value="Franek">
	<option value="Grzegorz">
	<option value="Halina">
	<option value="Iza">
	<option value="Jarek">
	<option value="Kamil">
	<option value="Lucyna">
	<option value="Michał">
	<option value="Nikodem">
	<option value="Ola">
	<option value="Paweł">
	<option value="Robert">
	<option value="Sebastian">
	<option value="Tomek">
	<option value="Urszula">
	<option value="Wiktor">
	<option value="Zenon">
</datalist>

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

<label for="imie">Wpisz swoje imię:</label>
<input type="text" id="imie" placeholder="Kliknij lub zacznij pisać" list="imiona">

… 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:datalistfeaturedformularzehtml5

komentarzy 13

  • Awatar
    Comandeer

    12 lutego 2016 16:06

    > 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.

    Odpowiedz
    • Awatar
      Michał Kortas

      12 lutego 2016 16:40

      > 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 :)

      Odpowiedz
    • Awatar
      Krystian

      17 lutego 2016 00:45

      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.

      Odpowiedz
      • Awatar
        Michał Kortas

        17 lutego 2016 09:30

        A wybranie danych z bazy i wygenerowanie za pomocą pętli? Gdyby były problemy, zapraszam na forum.

        Odpowiedz
    • Awatar
      Deser

      4 marca 2016 15:18

      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.

      Odpowiedz
      • Awatar
        Comandeer

        4 marca 2016 15:36

        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ć.

        Odpowiedz
    • Awatar
      Maciej Lew

      17 listopada 2016 20:47

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

      Odpowiedz
      • Awatar
        Comandeer

        17 listopada 2016 20:48

        No ale przecież te sugestie i tak sami podajemy, więc i tutaj lepiej wygenerować taką listę samemu.

        Odpowiedz
  • Awatar
    pawelw2

    17 lutego 2016 09:21

    Safari nie ogarnia tematu :(

    Odpowiedz
  • Awatar
    ksiadz

    12 lipca 2016 11:41

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

    Odpowiedz
  • Awatar
    ucherubinow

    20 listopada 2016 19:05

    No w safari niestety nie działa.

    Odpowiedz
    • Awatar
      Michał Kortas

      22 listopada 2016 17:53

      Safari nie jest najlepszą przeglądarką, żeby nie powiedzieć, upośledzoną :)

      Odpowiedz

Zostaw odpowiedź