webentwicklung-frage-antwort-db.com.de

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 das andere zu verwenden? Ein Beispiel von jedem folgt:

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

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

Edit 1: Welches davon verwendet wird, hängt von Ihren Anforderungen ab. Wenn der Benutzer muss eine Ihrer Optionen eingeben, verwenden Sie das Element select. Wenn die Verwendung beliebig ist, verwenden Sie das Element datalist.

Bearbeiten 2: Diesen Leckerbissen im HTML Living Standard gefunden: "Jedes Optionselement, das ein Nachkomme des Datenelementes ist, stellt einen Vorschlag dar."

150
james.garriss

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

Bei der Verwendung der Texteingabe als eine Art Autovervollständigung lautet die Frage: 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 <datalist> als Liste von Optionen für ein Textfeld konzentrieren, gibt es einige spezifische Unterschiede zwischen diesem und einem Auswahlfeld:

  • Ein <datalist>-Eingabefeld enthält eine einzige Zeichenfolge für die Anzeigebeschriftung und die Übermittlung. Ein Auswahlfeld kann einen anderen Übergabewert gegenüber der Anzeigebeschriftung <option value='ie'>Internet Explorer</option> haben. 
  • Ein <datalist>-Eingabefeld unterstützt den <optgroup>-Tag nicht, um die Anzeige zu organisieren.
  • Sie können einen Benutzer nicht auf die Liste der Optionen in einem <datalist> beschränken, wie Sie es mit einem <select> tun können.
  • Das onchange -Ereignis funktioniert anders. Bei einem <select>-Element wird das Onchange-Ereignis sofort bei einer Änderung ausgelöst, wohingegen bei <input type="text" das Ereignis ausgelöst wird, nachdem das Element den Fokus verliert oder der Benutzer die Eingabetaste drückt.
  • <datalist> hat in Browsern nur sehr wenig Unterstützung. Die Art und Weise, wie alle verfügbaren Optionen angezeigt werden, ist inkonsistent, und von dort aus wird es nur noch schlimmer.

Der letzte Punkt ist meiner Meinung nach wirklich der große. Da Sie einen universelleren Fall für die automatische Vervollständigung der Autovervollständigung haben MÜSSEN, gibt es fast keinen Grund, sich die Konfiguration eines <datalist> zu überlegen. Jedes anständige Autocomplete-Plug-in ermöglicht es Ihnen, die Anzeige Ihrer Optionen zu gestalten, was <datalist> nicht tut. Wenn <datalist><li> Elemente akzeptiert, die Sie nach Belieben manipulieren könnten, wäre das wirklich großartig! Aber nein.

Soweit ich das beurteilen kann, ist die <datalist>-Suche eine exakte Übereinstimmung vom Anfang der Zeichenfolge. Wenn Sie <option value="internet Explorer"> hätten und nach 'Explorer' gesucht hätten, würden Sie keine Ergebnisse erhalten. Die meisten Autocomplete-Plugins durchsuchen irgendwo im Text.

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

51
mastaBlasta

Datalist umfasst automatisch die automatische Vervollständigung und die Vorschläge. Außerdem kann ein Benutzer einen Wert eingeben, der nicht in den Vorschlägen definiert ist.

Bei Auswahl werden nur vordefinierte Optionen angezeigt, aus denen der Benutzer auswählen muss

3
user3167654

Die Datenliste ist ein neues HTML-Tag in HTML5-unterstützten Browsern . Es wird als Textfeld mit einigen Optionenlisten angezeigt. Für Beispiel für Geschlechtertextfeld erhalten Sie die Optionen "Männlich", wenn Sie 'M' eingeben. oder 'F' im Textfeld.

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

Es gibt einen weiteren wichtigen Unterschied zwischen select und datalist. Hier kommt der Unterstützungsfaktor des Browsers.

select wird von Browsern im Vergleich zu datalist weitgehend unterstützt. Bitte schauen Sie sich diese Seite an, um die vollständige Browserunterstützung von datalist-- zu gewährleisten.

Datalist-Browser-Unterstützung

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

0
neophyte

Ich habe festgestellt, dass es in datalist kein ausgewähltes Feature gibt. Sie haben nur die Wahl, können aber keine Standardoption haben. Sie können die ausgewählte Option auch nicht auf der nächsten Seite anzeigen.

0
kakugiki

Um einen Teil Ihrer Frage zu beantworten: "Gibt es eine Situation, in der es besser ist, den einen oder den anderen zu verwenden?", Betrachten Sie ein Formular mit sich wiederholenden Abschnitten. Wenn der Wiederholungsabschnitt viele select-Tags enthält, müssen die options für jede Auswahl und für jede Zeile gerendert werden.

In einem solchen Fall würde ich erwägen, datalist mit input zu verwenden, da dieselbe datalist für eine beliebige Anzahl von inputs verwendet werden kann. Dadurch kann möglicherweise eine große Renderzeit auf dem Server eingespart werden, und es lässt sich viel besser auf eine beliebige Anzahl von Zeilen skalieren.

0
Bruce Pierson