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>
html
html-select
forms
html-datalist
user928984
źródło
źródło
option
tagu w opcji datalist? Wydaje się, że Sublime chcecode
<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>code
Wynik jest dziwny. Bazy danych drukują wartość na liście. Ta wartość staje się następnie wartością pola wejściowego.option
, nie ma potrzeby stosowania tagu zamykającego ani samozamykania. HTML 5! = XHTML.Odpowiedzi:
Potraktuj to jako różnicę między wymaganiem a sugestią. W przypadku
select
elementu użytkownik musi wybrać jedną z podanych opcji. W przypadkudatalist
elementu 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
select
elementu. Jeśli użycie może wprowadzić cokolwiek, użyjdatalist
elementu.Edycja 2: znaleziono tę ciekawostkę w standardzie HTML Living Standard : „Każdy element opcji, który jest potomkiem elementu datalist ... reprezentuje sugestię”.
źródło
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.<datalist>
taki sam sposób, jak możesz za pomocą pliku<select>
.<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.źródło
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ć
źródło
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.
źródło
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
select
tagów, tooption
s muszą być renderowane dla każdego zaznaczenia, dla każdego wiersza.W takim przypadku rozważałbym użycie
datalist
withinput
, ponieważ tego samegodatalist
można użyć dla dowolnej liczbyinput
s. Mogłoby to potencjalnie zaoszczędzić dużo czasu renderowania na serwerze i znacznie lepiej skalować do dowolnej liczby wierszy.źródło
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.
źródło
Istnieje jeszcze jedna ważna różnica między
select
idatalist
. 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.)
źródło
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.
źródło