Hatten Sie schon einmal ein Formular, das kurze, beliebige Texteingaben akzeptieren musste? Wie einen Namen oder so etwas. Genau dafür ist <input type="text"> da. Es gibt viele verschiedene Eingabetypen (und Modi!), und die Wahl des richtigen ist eine gute Idee.
Aber diese kleine Geschichte handelt von etwas anderem und gilt für jeden von ihnen.
Was ist, wenn der Text beliebig sein muss (wie „Wie ist deine Lieblingsfarbe?“) So dass die Leute tippen können, was sie wollen, aber Sie auch hilfreich sein möchten. Vielleicht gibt es eine Handvoll wirklich beliebter Antworten. Wäre es nicht schön, wenn die Leute einfach eine auswählen könnten? Kein <select>, sondern eine Mischung aus einem Eingabefeld und einer Dropdown-Liste. Aber warten Sie mal. Erstellen Sie noch keine eigenen benutzerdefinierten React-Elemente.
Dafür ist <datalist> da. Ich habe es neulich erfolgreich benutzt, also dachte ich, ich schreibe einen Blogbeitrag darüber, denn Bloggen ist cool.
Hier sind die Grundlagen
Sehen Sie den Pen
Grundlegende Datalist-Nutzung von Chris Coyier (@chriscoyier)
auf CodePen.
Der Anwendungsfall, mit dem ich mich beschäftigte, benötigte
- Ein
<input type="text">für einen Benutzernamen - Ein
<input type="text">für einen „Flag“ (einen beliebigen String, der eine Berechtigung darstellt)
Ich würde wahrscheinlich keine <datalist> für jeden Benutzernamen in einer Datenbank verwenden. Ich glaube nicht, dass es eine Grenze gibt, aber da dies in Ihrem HTML steht, würde ich sagen, dass es am besten bei vielleicht 100 Optionen oder weniger funktioniert.
Aber für die zweite Option hatten wir zu der Zeit nur etwa 3-4 eindeutige Flags, mit denen wir es zu tun hatten, so dass eine Datalist dafür perfekt war. Sie können tippen, was Sie wollen, aber diese UI hilft Ihnen, die gängigsten Optionen auszuwählen. So verdammt nützlich. Vielleicht könnte dies für etwas wie eine Geschlechtseingabe nützlich sein, bei der es eine Liste von Optionen gibt, die Sie auswählen können, aber sie erzwingt nicht, dass Sie tatsächlich eine davon auswählen.
Noch weniger bekannt als die Tatsache, dass <datalist> existiert? Die Tatsache, dass es für alle Arten von Eingaben funktioniert, nicht nur für text, sondern auch für date, range und sogar color.
Ich würde davon abraten, Labels zu verwenden („Die Farbe des Himmels“ in Ihrer Demo), bis Mozilla Bug 869690 behoben hat. Das Problem in Firefox ist, dass, wenn der Benutzer „b“ eingibt, keine Übereinstimmung für „blau“ vorhanden ist, da Firefox die Benutzereingabe mit dem Label vergleicht und nicht mit dem Wert, wenn ein Label angegeben ist.
Wow! Guter Fang. Dieses Problem wurde vor 6 Jahren eröffnet ... und ist immer noch nicht behoben.
Dieses Video (aus dem Thread) ist sowohl urkomisch als auch schmerzhaft ... https://bug869690.bmoattachments.org/attachment.cgi?id=9055574
Zuerst fragte ich mich, ob wir davon ausgehen könnten, dass das Label immer sichtbar ist und es standardmäßig einschließen (passend zum Wert) und dann vielleicht ein tatsächliches
<label></label>-Element für zusätzlichen Kontext verwenden. Aber die Ergebnisse in einem schnellen Test waren wieder ... unerwartet ...Seltsamerweise ist das Verhalten in FF in diesem Fall tatsächlich sinnvoller, während das Ergebnis in Chrome einfach nur seltsam ist!
Ich liebe Datalist – ich würde es sogar für eine größere Auswahl wie Länder verwenden –, aber ich mag nicht, dass man den Eingabepfeil oder das Dropdown-Aussehen überhaupt nicht gestalten kann. Vielleicht möchte ich eine Datalist mit Ländern und ich möchte die Flagge vor den Ländern in der Dropdown-Liste anzeigen – das ist nicht möglich. Das ist ein großer und unnötiger einschränkender Faktor.
Ich finde es schlecht, dass das Dropdown gar nicht wie das „select“-Dropdown des Browsers aussieht. Ich konnte die Komponente so gestalten, dass sie zu unseren anderen Dropdowns passt, aber das Menü selbst ist völlig anders und anscheinend nicht gestaltbar. Siehe https://codepen.io/smlombardi/pen/XvpGrb?editors=1100#0
Es sieht so aus, als hätte Safari einen Fehler, bei dem sowohl Datalist- als auch Auto-Fill-Vorschläge angezeigt werden (das sind meine Kontakte aus dem Adressbuch).
Was für ein toller Fund! Ich war wirklich begeistert, bis ich feststellte, dass es nicht wirklich mehrere Eingabeelemente unterstützt, z. B. „rot, grün, blau“, außer im Fall von E-Mails ... wirklich seltsam.
Ich habe einen cleveren Trick gefunden, nachdem ich tagelang feststeckte. Es stellt sich heraus, dass das Musterattribut die verfügbaren Optionen in der Liste filtert. Ich verwende eine Datalist, um die gleichen Optionen für verschiedene Eingabefelder bereitzustellen, und das Muster ermöglicht es mir, zu steuern, welche Optionen in einem bestimmten Eingabefeld angezeigt werden.
Es ist wichtig zu beachten, dass Eingabemuster Groß-/Kleinschreibung beachten. So würde Muster = „na“ kein „na“ zulassen.