webentwicklung-frage-antwort-db.com.de

Das datalistische HTML5-Tag wird in Safari nicht aufgefüllt

Ich habe ein datalist-Tag, mit dem meine Benutzer eine Vorschlagsbox haben können. Ich habe jedoch festgestellt, dass diese Funktion in Safari nicht unterstützt wird. Gibt es eine Problemumgehung für dieses Problem?

Hier ist mein Code - Ich fülle meine Werte tatsächlich mit einer Ajax-Methode auf, aber so würde es aussehen, wenn es gefüllt ist:

<datalist id="languages">
    <option value="HTML">
    <option value="CSS">
    <option value="JavaScript">
    <option value="Java">
    <option value="Ruby">
    <option value="PHP">
    <option value="Go">
    <option value="Erlang">
    <option value="Python">
    <option value="C">
    <option value="C#">
    <option value="C++">
</datalist>

Search: 
<input type="text" list="languages">

Ich habe auch eine Geige hier

22
R Doolabh

Datenlistenelemente werden in Safari nicht unterstützt. http://caniuse.com/#feat=datalist

21
Tim Dearborn

Umgehung der HTML5-Datenverarbeitung für Safari und/oder ältere Browser

Update, Januar 2017

Sowohl iOS als auch Desktop Safari unterstützen immer noch keine Dataliste und es gibt bisher keine Anzeichen dafür, dass sich dies ändert. Dies ist also ein Hack, der es erscheinen lässt, um das Problem zu umgehen. Chris Coyier hatte im Jahr 2011 auch einen Versuch mit einem Datalist-Polyfill . Hoffen wir, dass Safari in Zukunft die bestehende W3C-Empfehlung implementiert.

Ursprünglicher Beitrag:

Sie können ein select-Element innerhalb der datalist verwenden und die option-Tag-Werte als lesbaren Text darin duplizieren. Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <style>
    input[list="languages"] {
      width: 12em;
      border: none;
      background: #eee;
    }
    select {
      width: 12em;
      margin: 0;
      margin-left: -12.75em;
    }
  </style>
</head>
<body>

Choose: <input type="text" list="languages">
<label for="languages">
  <datalist id="languages">
    <select>
      <option value="JavaScript">JavaScript</option>
      <option value="Haskell">Haskell</option>
      <option value="Ruby">Ruby</option>
      <option value="Go">Go</option>
      <option value="Python">Python</option>
      <option value="etc">etc</option>
    </select>
  </datalist>
</label>
</body>
</html>

Unterstützende Browser zeigen nur die Variable datalist, Safari und ältere Browser die inneren HTML der option-Tags an. Das input-Tag hat einen Standardrahmen, der in Safari hinter dem select-Element schlecht aussieht, aber mit ein wenig Stil, wie in diesem Beispiel gezeigt, können Sie die mangelnde Unterstützung von Safari umgehen und das gleiche funktionale Erscheinungsbild beibehalten. Keine Notwendigkeit für Javascript und/oder Polyfills.

26
Dave Everitt

Ich weiß, dass es etwas spät ist, aber für diejenigen, die eine Lösung suchen, die die Daten von Datalist auf Safari nachahmt, anstatt sie durch eine Auswahl zu ersetzen:

https://github.com/Fyrd/purejs-datalist-polyfill

Im Grunde eine kurze und süße .js und .css-Datei, die Sie in Ihre HTML-Datei aufnehmen können. Datalists verknüpfte Eingänge verhalten sich in Safari und Opera mini genauso wie in Chrome, Firefox und Android Browser.

9
George

Ab Safari 12.1 wird nun endlich auch der Datalist unterstützt. Bitte beachten Sie die Apple Release Notes .

Es scheint, dass der Entwickler der mdnempfohlene Polyfüllung immer auf dem neuesten Stand ist:

Update: Safari TP unterstützt das Element "Datalist" zumindest im Wesentlichen und seine Funktionalität wird in der nächsten Version von Safari sowohl für iOS als auch für MacOS X enthalten sein. Ja !!! Spannende Neuigkeiten! Ich plane, in Kürze eine neue Hauptversion herauszubringen, um sowohl die Implementierung zu unterstützen als auch zu unterstützen

3
Motine

Erstmal Danke, George, für Ihr Skript, das heute wieder funktioniert. Für diejenigen, die Probleme bekommen, weil Ihre Optionen in der oberen linken Ecke angezeigt werden (wie iamse7en), sollten Sie diese Zeilen in datalist.polyfill.js ändern:

56

document.body.appendChild( fakeList ); document.getElementById("myIdDiv").appendChild( fakeList );

Im Beispiel auf dem Github-Projekt war es nur ein Div im Körper, also war es kein Problem.

110

input.value = item.innerText; input.value = item.innerHTML;

Klicken Sie irgendwo auf den Artikel und nicht nur auf den Text.

Fügen Sie schließlich <script src="/static/js/datalist.polyfill.js"></script> in Ihre HTML-Datei ein, nicht jedoch die Version datalist.polyfill.min.js

0
Mianto

Zusätzlich zu dem, was Mianto bezüglich der Frage von iamse7en gesagt hat, ändern Sie in Zeile 51 folgende Zeile, um Ihre Datenquelle an eine dynamische DIV zu binden (das Beispiel, das Mianto gegeben hat und dann Moritz bearbeitet hat)

function convert(input, datalist, listItems) {
    var fakeList = document.createElement('ul');
    var visibleItems = null;
    fakeList.id = listId;
    fakeList.className = LIST_CLASS;
    document.body.appendChild( fakeList );

zu:

function convert(input, datalist, listItems) {
    var fakeList = document.createElement('ul');
    var visibleItems = null;
    fakeList.id = listId;
    fakeList.className = LIST_CLASS;
    input.parentNode.style.position = "relative";
    input.parentNode.appendChild( fakeList );
0
EvilJordan