Formularz HTML: Select-Option vs Datalist-Option

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>

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

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.

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ć

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>

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.

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.

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

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.