Formularz HTML: Select-Option vs Datalist-Option

136

Zastanawiałem się, jakie są różnice między Select-Option i Datalist-Option. Czy jest jakaś sytuacja, w której lepiej byłoby użyć jednego lub drugiego? Oto przykład każdego z nich:

Wybierz opcję

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-Option

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
user928984
źródło
11
Ponieważ HTML5 wyraźnie mówi, że atrybuty niecytowane
james.garriss
1
Czy ktoś wie, dlaczego nie zamykamy optiontagu w opcji datalist? Wydaje się, że Sublime chce
Johnny Metz
1
@ johnny Metz Możesz zamknąć tag, ale może on zamykać się samoczynnie, możesz też zrobić coś takiego: code <input list = "browsers" name = "browser"> <datalist id = "browsers"> <option value = "firefox" > Firefox </option> <option value = "ie"> IE </option> <option value = "chrome"> Chrome </option> <option value = "opera"> Opera </option> <option value = " safari "> Safari </option> </datalist> codeWynik jest dziwny. Bazy danych drukują wartość na liście. Ta wartość staje się następnie wartością pola wejściowego.
Sarah M Giles
3
@JohnnyMetz, HTML 5 był po części reakcją na XHTML. W przypadku niektórych elementów, na przykład option, nie ma potrzeby stosowania tagu zamykającego ani samozamykania. HTML 5! = XHTML.
james.garriss
2
Specyfikacja mówi: „Znaczniki początkowe i końcowe niektórych normalnych elementów można pominąć”. Mówi się również: „Znacznik końcowy elementu opcji może zostać pominięty, jeśli bezpośrednio po elemencie opcji następuje inny element opcji, lub jeśli bezpośrednio po nim następuje element optgroup lub jeśli w elemencie nadrzędnym nie ma więcej treści”. w3.org/TR/html/syntax.html#optional-tags
james.garriss

Odpowiedzi:

180

Potraktuj to jako różnicę między wymaganiem a sugestią. W przypadku selectelementu użytkownik musi wybrać jedną z podanych opcji. W przypadku datalistelementu sugeruje się, aby użytkownik wybrał jedną z podanych przez Ciebie opcji, ale w rzeczywistości może wprowadzić dowolne dane wejściowe.

Edycja 1: Więc który z nich używasz, zależy od twoich wymagań. Jeśli użytkownik musi wprowadzić jedną z opcji, użyj selectelementu. Jeśli użycie może wprowadzić cokolwiek, użyj datalistelementu.

Edycja 2: znaleziono tę ciekawostkę w standardzie HTML Living Standard : „Każdy element opcji, który jest potomkiem elementu datalist ... reprezentuje sugestię”.

james.garriss
źródło
Ponadto ma głównie [częściowe wsparcie] (( caniuse.com/#feat=datalist ) w innych przeglądarkach, z błędami, takimi jak długie datalists, których nie można przewijać itp.
Govind Rai
W chrome w tej chwili, jeśli dane są wprowadzane (wpisywane), uniemożliwia kliknięcie strzałki. W większości przypadków nie jest to prawdopodobnie idealne.
David
66

Z technicznego punktu widzenia są zupełnie inne. <datalist>jest abstrakcyjnym zbiornikiem opcji dla innych elementów. W twoim przypadku używałeś go z, <input type="text"ale możesz również używać go z zakresami, kolorami, datami itp. Http://demo.agektmr.com/datalist/

Jeśli używasz go z wprowadzaniem tekstu, jako rodzaj autouzupełniania, to naprawdę pytanie brzmi: Czy lepiej jest użyć swobodnego wprowadzania tekstu, czy z góry określonej listy opcji? W takim razie myślę, że odpowiedź jest nieco bardziej oczywista.

Jeśli skupimy się na użyciu <datalist>jako listy opcji dla pola tekstowego, oto kilka konkretnych różnic między tym a polem wyboru:

  • <datalist>Pole tekstowe karmione ma jeden ciąg zarówno etykiety wyświetlacza i prześlij. Pole wyboru może mieć inną wartość przesłania niż etykieta wyświetlania <option value='ie'>Internet Explorer</option>.
  • <datalist>Pole tekstowe karmione nie obsługuje <optgroup>znacznika do organizowania wyświetlacz.
  • Nie możesz ograniczyć użytkownika do listy opcji w <datalist>taki sam sposób, jak możesz za pomocą pliku <select>.
  • Onchange wydarzenie działa inaczej. W <select>elemencie zdarzenie onchange jest wywoływane natychmiast po zmianie, podczas gdy <input type="text"w przypadku zdarzenia jest uruchamiane po utracie aktywności elementu lub naciśnięciu klawisza Enter.
  • <datalist>ma naprawdę nierówną obsługę w różnych przeglądarkach. Sposób wyświetlania wszystkich dostępnych opcji jest niespójny, a od tego momentu sytuacja tylko się pogarsza.

Moim zdaniem ostatni punkt jest naprawdę duży. Ponieważ MUSISZ mieć bardziej uniwersalną rezerwę autouzupełniania, prawie nie ma powodu, aby przechodzić przez kłopoty z konfiguracją pliku <datalist>. Ponadto wszelkie przyzwoite wtyczki autouzupełniania pozwolą na styl wyświetlania twoich opcji, co <datalist>nie działa. Gdyby <datalist>zaakceptować <li>elementy, którymi można by manipulować w dowolny sposób, byłoby naprawdę świetnie! Ale nie.

O ile wiem, <datalist>wyszukiwanie jest dokładnym dopasowaniem od początku ciągu. Więc gdybyś <option value="internet explorer">szukał hasła „eksplorator”, nie uzyskałbyś żadnych wyników. Większość wtyczek autouzupełniania wyszukuje w dowolnym miejscu tekstu.

Użyłem tylko <datalist>szybkiego i leniwego pomocnika dla wygody na niektórych stronach wewnętrznych, na których wiem ze 100% pewnością, że użytkownicy mają najnowszą wersję przeglądarki Chrome lub Firefox i nie będą próbowali podawać fałszywych wartości. W każdym innym przypadku trudno jest polecić korzystanie z programu <datalist>ze względu na bardzo słabą obsługę przeglądarki.

mastaBlasta
źródło
3
Doskonała odpowiedź !! Czy mógłbyś wyjaśnić swoją drugą kulę? Co rozumiesz przez „grupy opcji do organizowania wyświetlania”? Dzięki.
Govind Rai
afaik (w 2019 roku w przeglądarce Chrome i Firefox), <datalist> dopasowuje infiksy (nie tylko przedrostki). więc „wpisanie„ re ”sugeruje zarówno„ Firefox ”, jak i„ Internet Explorer ”.
sam boosalis,
@GovindRai I pobieżne wyszukiwanie „optgroup element” zwraca tę stronę z zawsze przydatnego MDN z dodatkowymi informacjami (i przykładami): developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
TylerH
Testowałem pod Firefox 66 i Chrome 73 - właściwie etykiety datalist pasują wszędzie, więc na przykład jeśli twój datalist zawiera nazwy krajów, „ted” pasuje do „United States” i „United Kingdom”.
Błotosmętek
5

Datalist zawiera natywnie autouzupełnianie i sugestie, ale może też pozwolić użytkownikowi wprowadzić wartość, która nie jest zdefiniowana w sugestiach.

Opcja Wybierz udostępnia tylko wstępnie zdefiniowane opcje, z których użytkownik może wybierać

user3167654
źródło
2

Lista danych to nowy tag HTML w przeglądarkach obsługujących HTML5. Renderuje się jako pole tekstowe z listą opcji. Na przykład dla pola tekstowego Płeć, po wpisaniu „M” lub „F” w polu tekstowym, pojawi się opcja Mężczyzna Kobieta.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>
Deepak
źródło
5
To prawda, ale daje jedną fajną, nową informację, a mianowicie, że wpisanie pierwszej litery spowoduje wybranie odpowiednich pozycji z listy.
james.garriss
1

Aby konkretnie odpowiedzieć na część pytania „Czy jest jakaś sytuacja, w której lepiej byłoby użyć jednej lub drugiej?”, Rozważ formularz z powtarzającymi się sekcjami. Jeśli sekcja powtarzająca się zawiera wiele selecttagów, to options muszą być renderowane dla każdego zaznaczenia, dla każdego wiersza.

W takim przypadku rozważałbym użycie datalistwith input, ponieważ tego samego datalistmożna użyć dla dowolnej liczby inputs. Mogłoby to potencjalnie zaoszczędzić dużo czasu renderowania na serwerze i znacznie lepiej skalować do dowolnej liczby wierszy.

Bruce Pierson
źródło
Jeśli nie masz zamiaru zawracać sobie głowy daniem użytkownikowi opcji do wyboru, po co zawracać sobie głowę korzystaniem z datalist? Zamiast tego użyj pola tekstowego.
james.garriss
0

Zauważyłem, że w Datalist nie ma wybranej funkcji. Daje tylko wybór, ale nie może mieć opcji domyślnej. Nie możesz też pokazać wybranej opcji na następnej stronie.

Weihui Guo
źródło
Odpowiednikiem dla input plus datalist byłoby ustawienie wartości = "(opcja domyślna)" na samym wejściu. W przypadku danych wejściowych z type = "text" ten tekst będzie wyświetlany domyślnie, ale będzie można go edytować.
Bemisawa
0

Istnieje jeszcze jedna ważna różnica między selecti datalist. Oto czynnik obsługi przeglądarki.

select jest szeroko obsługiwany przez przeglądarki w porównaniu do datalist. Zajrzyj na tę stronę, aby uzyskać pełną obsługę datalist przez przeglądarkę -

Obsługa przeglądarki Datalist

Gdzie as select jest obsługiwany we wszystkich przeglądarkach (od IE6 +, Firefox 2+, Chrome 1+ itd.)

neofita
źródło
0

Jest podobny do wyboru, ale datalist ma dodatkowe funkcje, takie jak automatyczne sugerowanie. Możesz nawet pisać i wyświetlać sugestie podczas pisania.

Użytkownik będzie również mógł pisać pozycje, których nie ma na liście.

Viyaan Jhiingade
źródło