Formularz HTML: Select-Option vs Datalist-Option

Z technicznego punktu widzenia są zupełnie inne. <datalist> jest abstrakcyjnym kontenerem 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 typu autouzupełniania, to naprawdę pytanie brzmi: czy lepiej jest użyć dowolnego wprowadzania tekstu, czy z góry określonej listy opcji? W takim razie myślę, że odpowiedź jest nieco bardziej to oczywiste.

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

• A <datalist> pole tekstowe fed ma pojedynczy ciąg znaków zarówno dla display label, jak i submit. Pole wyboru może mieć inną wartość submit zamiast display label <option value='ie'>Internet Explorer</option>.
• pole tekstowe <datalist> nie obsługuje znacznika <optgroup> do organizacji wyświetlania.
• nie można ograniczyć użytkownika do listy opcji w <datalist> jak możesz z <select>.
• Zdarzenie onchange działa inaczej. W elemencie <select> Zdarzenie onchange jest wywoływane natychmiast po zmianie, podczas gdy w <input type="text" zdarzenie jest wywoływane po utracie ostrości elementu lub naciśnięciu klawisza enter.
• <datalist> ma naprawdę spotty wsparcie we wszystkich przeglądarkach. Sposób pokazania wszystkich dostępnych opcji jest niespójny, a od tego momentu wszystko się pogarsza.

Również o ile mogę powiedzieć, wyszukiwanie <datalist> jest dokładnym dopasowaniem od początku łańcucha. Więc gdybyś miał <option value="internet explorer"> a szukając 'explorer' nie otrzymałbyś żadnych wyników. Większość wtyczek autouzupełniania będzie wyszukiwać w dowolnym miejscu tekstu.

Użyłem tylko <datalist> jako szybkiego i leniwego pomocnika wygody dla niektórych stron wewnętrznych, gdzie Wiem ze 100% pewnością, że użytkownicy mają najnowszą Chrome lub Firefox, i nie będzie próbował przedstawiać fałszywych wartości. W każdym innym przypadku trudno jest polecić użycie <datalist> ze względu na bardzo słabą obsługę przeglądarki.

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

Select only daje wstępnie zdefiniowane opcje, które użytkownik musi wybrać z

Data List jest nowym znacznikiem HTML w przeglądarkach obsługiwanych przez HTML5. Renderuje się jako pole tekstowe z pewną listą opcji. Na przykład w polu tekstowym płeć daje opcje jako mężczyzna kobieta po wpisaniu " M " lub " F " w polu tekstowym.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Zauważyłem, że nie ma wybranej funkcji w datalist. Daje tylko wybór, ale nie może mieć opcji domyślnej. Zaznaczoną opcję również nie można wyświetlić na następnej stronie.

Aby konkretnie odpowiedzieć na część twojego pytania " czy jest jakaś sytuacja, w której lepiej byłoby użyć jednego lub drugiego?", rozważ formę z powtarzającymi się sekcjami. Jeśli sekcja repeating zawiera wiele znaczników select, to option muszą być renderowane dla każdego select, dla każdego wiersza.

W takim przypadku rozważyłbym użycie datalist z input, ponieważ to samo datalist może być używane dla dowolnej liczby inputs. potencjalnie może to zaoszczędzić dużą ilość czasu renderowania na serwerze i znacznie lepiej skalowałby się do dowolnej liczby wierszy.

Jest jeszcze jedna ważna różnica między select a datalist. Nadchodzi współczynnik wsparcia przeglądarki.

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

Datalist browser support

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

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

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