Datalista HTML dla tekstu wejściowego z wartością opcji - html, safari, html-datalist

W Google Chrome pozwala mi wybrać „czerwony” i „niebieski” z listy rozwijanej po wpisaniu „b” lub „r”:

<input type="text" list="colors" />
<datalist id="colors">
<option value="red">
<option  value="blue">
</datalist>

Jednak w Safari tak nie jest.

1. Czemu?

2. Gdybym chciał to zrobić w Safari, co musiałbym zrobić?

Odpowiedzi:

The <datalist> tag nie jest w rzeczywistości natywnie obsługiwane w Safari jeszcze. Istnieje jednak kilka rozwiązań tego problemu. Poniżej znajduje się lista kompatybilności przeglądarki z <datalist> etykietka.
Chrome: 20,0
IE: 10,0
Firefox: 4.0
Safari: Niewspierany
Opera: 9.0
Rozwiązanie A
Możesz rozważyć użycie <select> tag, choć ma to swoje wady. w przeciwieństwie do <datalist> tag, użytkownik musi wybrać jedną z podanych opcji <datalist> tag, użytkownik może wprowadzić wszystko, co chce.
Rozwiązanie B
Stwórz <select> element i <input> element pasujący do podwójnej funkcjonalności <datalist> etykietka.

<p>Choose from this list
<select>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
or type in a custom input
<input type="text" name="custominput">

Rozwiązanie C
Użyj rozwiązania do napełniania, aby je rozwiązać. To jest bardziej skomplikowane. Musisz użyć modenizr biblioteka do wykonania tego zadania.
http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/
Rozwiązanie D
Możesz użyć biblioteki wypełniania danych, takiej jak webshim, który umożliwia niezawodne korzystanie z funkcji HTML5 w różnych przeglądarkach, pomimo braku rodzimej obsługi.
http://afarkas.github.io/webshim/demos/

The datalist tag nie jest obsługiwany przez Safari i jest częściowo wspierany przez TO ZNACZY, sprawdź wsparcie tutaj.

Powinieneś rozważyć użycie Wybierz tag (z atrybutem wielokrotnym, jeśli chcesz zezwolić na wiele wartości):

<select multiple>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select>

Lub możesz użyć Odpowiednie menu rozwijane HTML5 datalist polyfill, który może pomóc w rozwiązaniu problemów z crossbrowerem.