HTML-Formular: Select-Option vs Datalist-Option

Ich habe mich gefragt, was die Unterschiede zwischen Select-Option und Datalist-Option sind. Gibt es eine Situation, in der es besser wäre, das eine oder andere zu verwenden? Es folgt jeweils ein Beispiel:

Wähle eine Option

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

Betrachten Sie es als den Unterschied zwischen einer Anforderung und einem Vorschlag. Für das selectElement muss der Benutzer eine der von Ihnen angegebenen Optionen auswählen. Für das datalistElement wird empfohlen, dass der Benutzer eine der von Ihnen angegebenen Optionen auswählt, aber tatsächlich alles eingeben kann, was er in die Eingabe möchte.

Bearbeiten 1: Welche Sie also verwenden, hängt von Ihren Anforderungen ab. Wenn der Benutzer eine Ihrer Auswahlmöglichkeiten eingeben muss , verwenden Sie das selectElement. Wenn die Verwendung etwas eingeben kann, verwenden Sie das datalistElement.

Bearbeiten 2: Diesen Leckerbissen im HTML Living Standard gefunden : "Jedes Optionselement, das ein Nachkomme des Datenlistenelements ist ... repräsentiert einen Vorschlag."

Aus technischer Sicht sind sie völlig anders. <datalist>ist ein abstrakter Container mit Optionen für andere Elemente. In Ihrem Fall haben Sie es mit verwendet, <input type="text"aber Sie können es auch mit Bereichen, Farben, Datumsangaben usw. verwenden. Http://demo.agektmr.com/datalist/

Wenn Sie es mit Texteingabe als eine Art Autovervollständigung verwenden, lautet die Frage wirklich: Ist es besser, eine Freiform-Texteingabe oder eine vorgegebene Liste von Optionen zu verwenden? In diesem Fall denke ich, dass die Antwort etwas offensichtlicher ist.

Wenn wir uns auf die Verwendung von konzentrieren <datalist> als Liste von Optionen für ein Textfeld konzentrieren, gibt es hier einige spezifische Unterschiede zwischen diesem und einem Auswahlfeld:

• Ein <datalist>eingegebenes Textfeld enthält eine einzelne Zeichenfolge sowohl für die Anzeige als auch für die Übermittlung. Ein Auswahlfeld kann einen anderen Übermittlungswert als die Anzeigebezeichnung haben<option value='ie'>Internet Explorer</option> .
• Ein <datalist>gespeistes Textfeld unterstützt das nicht<optgroup> Tag zum Organisieren der Anzeige nicht.
• Sie können einen Benutzer nicht auf die Liste der Optionen beschränken, <datalist>wie Sie es mit einem können<select> .
• Das Ereignis onchange funktioniert anders. Bei einem <select>Element wird das Ereignis onchange sofort nach der Änderung ausgelöst, während <input type="text"das Ereignis ausgelöst wird, nachdem das Element den Fokus verloren hat oder der Benutzer die Eingabetaste drückt.
• <datalist>hat wirklich fleckige Unterstützung für alle Browser. Die Art und Weise, alle verfügbaren Optionen anzuzeigen, ist inkonsistent, und von da an wird es nur noch schlimmer.

Der letzte Punkt ist meiner Meinung nach wirklich der große. Da Sie einen universelleren Fallback für die automatische Vervollständigung benötigen, gibt es fast keinen Grund, sich die Mühe zu machen, a zu konfigurieren <datalist>. Außerdem können Sie mit der anständigen automatischen Vervollständigung die Anzeige Ihrer Optionen gestalten, was <datalist>jedoch nicht der Fall ist. Wenn <datalist>akzeptierte <li>Elemente, die Sie manipulieren könnten, wie Sie wollen, wäre es wirklich toll gewesen! Aber nein.

Auch soweit ich das beurteilen kann, ist die <datalist>Suche eine exakte Übereinstimmung vom Anfang der Zeichenfolge. Wenn Sie also <option value="internet explorer">nach "Explorer" gesucht hätten, würden Sie keine Ergebnisse erhalten. Die meisten Plugins für die automatische Vervollständigung suchen an einer beliebigen Stelle im Text.

Ich habe nur <datalist>für einige interne Seiten, bei denen ich mit 100% iger Sicherheit weiß, dass die Benutzer über das neueste Chrome oder Firefox verfügen , als schnellen und faulen Hilfsprogramm verwendet und werde nicht versuchen, falsche Werte einzureichen. In allen anderen Fällen ist die Verwendung <datalist>aufgrund der sehr schlechten Browserunterstützung schwer zu empfehlen .

Die Datenliste enthält die automatische Vervollständigung und Vorschläge nativ. Sie kann einem Benutzer auch die Eingabe eines Werts ermöglichen, der in den Vorschlägen nicht definiert ist.

Mit Auswählen erhalten Sie nur vordefinierte Optionen, aus denen der Benutzer auswählen muss

Data List ist ein neues HTML-Tag in HTML5-unterstützten Browsern. Es wird als Textfeld mit einer Liste von Optionen gerendert. Als Beispiel für das Textfeld "Geschlecht" erhalten Sie Optionen als "Männlich" und "Weiblich", wenn Sie "M" oder "F" in das Textfeld eingeben.

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

Um einen Teil Ihrer Frage "Gibt es eine Situation, in der es besser ist, den einen oder anderen zu verwenden?" Speziell zu beantworten, ziehen Sie ein Formular mit sich wiederholenden Abschnitten in Betracht. Wenn der sich wiederholende Abschnitt viele selectTags enthält , wird deroption muss s für jede Auswahl für jede Zeile gerendert werden.

In einem solchen Fall würde ich die Verwendung datalistmit in Betracht ziehen input, da das gleiche datalistfür eine beliebige Anzahl von inputs verwendet werden kann. Dies könnte möglicherweise viel Renderzeit auf dem Server sparen und auf eine beliebige Anzahl von Zeilen viel besser skalieren.

Mir ist aufgefallen, dass in der Datenliste keine ausgewählte Funktion vorhanden ist. Es gibt Ihnen nur die Wahl, kann aber keine Standardoption haben. Sie können die ausgewählte Option auch nicht auf der nächsten Seite anzeigen.

Es gibt einen weiteren wichtigen Unterschied zwischen selectund datalist. Hier kommt der Browser-Unterstützungsfaktor.

select wird von Browsern im Vergleich zu datalist weitgehend unterstützt. Auf dieser Seite finden Sie die vollständige Browserunterstützung von datalist--.

Unterstützung für Datenlisten-Browser

Wobei as select in effektiv allen Browsern unterstützt wird (seit IE6 +, Firefox 2+, Chrome 1+ usw.)

Es ist ähnlich zu wählen, aber Datalist hat zusätzliche Funktionen wie Auto vorschlagen. Sie können sogar Vorschläge eingeben und anzeigen, wenn Sie tippen.

Der Benutzer kann auch Elemente schreiben, die nicht in der Liste enthalten sind.