So erstellen Sie einen Datalist, der sofort durchsucht werden kann
Dropdown-Listen bieten eine gute Möglichkeit , Optionen für ein Eingabefeld bereitzustellen, insbesondere wenn die Liste der verfügbaren Optionen lang ist. Ein Benutzer kann die gewünschte Option auswählen, indem er in das Feld eintippt , oder die Optionen durchsehen , die möglicherweise mit dem übereinstimmen, wonach sie suchen. Die Möglichkeit , die Optionen zu durchsuchen , ist jedoch die ideale Lösung.
Dieses Verhalten kann mit dem erreicht werden HTML-Element, das Eingabevorschläge für verschiedene Steuerelemente anzeigt , z zeigt nur die verfügbaren Optionen an, wenn der Benutzer bereits etwas in das Eingabefeld eingegeben hat.
Wir können ein Eingabefeld brauchbarer machen, wenn wir Benutzern während des Eingabeaufnahmeprozesses jederzeit den Zugriff auf die vollständige Liste der Optionen ermöglichen.
In diesem Beitrag erfahren Sie, wie Sie eine Drop-down-Liste erstellen , die Sie jederzeit mit der Suchfunktion durchsuchen können und HTML-Elemente und ein wenig JavaScript.
1. Erstellen Sie einen Datalist mit Optionen Zuerst erstellen wir einen Datenlistener für verschiedene Texteditoren. Stellen Sie sicher, dass der Wert des Listenattributs der ist identisch mit der id des Tag - so binden wir sie aneinander.
Atom Klammern Notizblock ++ Notizblock Erhabener Text TextEdit TextMate Wordpad 2. Machen Sie den Datalist sichtbar
Standardmäßig ist der HTML-Element ist ausgeblendet . Wir können es nur sehen, wenn wir eine Eingabe in das Feld eingeben, mit dem der Datengeber verbunden ist.
Es gibt jedoch eine Möglichkeit, den Inhalt des Datenträgers (dh alle Optionen) auf der Webseite zu "erzwingen". Wir müssen ihm nur einen anderen Wert für die display:block; geben, als none display:block; .
Datalist {Anzeige: Block; } Die angezeigten Optionen sind zu diesem Zeitpunkt noch nicht auswählbar , der Browser gibt nur die Optionen wieder, die er im Datenlisten findet.
Wie bereits erwähnt, aufgrund des eingebauten Verhaltens der
Element, ein Teil der Optionen wird bereits angezeigt und kann ausgewählt werden , jedoch nur, wenn der Benutzer beginnt, einen String einzugeben, zu dem der Browser eine passende Option finden kann .alle Optionen (auf dem oben gezeigten Screenshot, die unter dem Dropdown-Datalist angezeigt werden) an jedem anderen Punkt des Eingabevorgangs auswählbar zu machen - wenn Benutzer die Optionen auschecken möchten, bevor sie etwas eingeben, oder während sie Habe schon etwas in das Eingabefeld übernommen. 3. Bringen Sie die HTML-Element Es gibt zwei Möglichkeiten, Benutzern das Anzeigen und Auswählen aller Optionen zu ermöglichen, wann immer sie möchten:
Wir können jeder Option einen Click-Event-Handler hinzufügen und ihn zum Auswählen einer Option verwenden, wenn darauf geklickt wird, oder wir können die Optionen auch in eine echte Dropdown-Liste umwandeln , die standardmäßig ausgewählt werden kann. Wir können die Optionen des Datenzeichners mit den HTML-Element Wir wählen die zweite Methode, da sie einfacher ist, und sie können als Ersatzmechanismus in Browsern verwendet werden, die diese nicht unterstützen Element. Wenn ein Browser den Datalist nicht rendern und anzeigen kann, rendert er den Element mit allen seinen Optionen stattdessen.
Standardmäßig wird das select Element nicht in Browsern angezeigt, die datalist unterstützen, das heißt, bis wir den Datalist zwingen, seinen Inhalt mit der display: block; CSS-Regel
Also, wenn wir die Optionen aus dem obigen Beispiel (wo datalist hat display:block ) mit der HTML-Tag, der Code sieht wie folgt aus:
Atom Klammern Notizblock ++ Notizblock Erhabener Text TextEdit TextMate Wordpad alle Optionen von select in der Dropdown-Liste anzuzeigen, müssen wir die Attribute multiplesizeDie vollständige Dropdown-Liste soll nur angezeigt werden, wenn der Benutzer auf eine Umschaltfläche neben dem Eingabefeld klickt , während der Benutzer den Arbeitsdatengeber eingibt. Lassen Sie uns den display des Datenträgers auf " none und fügen Sie neben dem Eingabefeld eine Schaltfläche hinzu , die den display des Datenzeichens umschaltet und folglich das Erscheinen von select auslöst.
Datenliste {Anzeige: keine; } Wir müssen auch den folgenden Button oberhalb des Datenträgers in der HTML-Datei hinzufügen:
 € " Jetzt sehen wir uns das JavaScript an. Zuerst definieren wir die Anfangsvariablen .
button = document.querySelector ('button'); datalist = document.querySelector ('datalist'); select = document.querySelector ('select'); options = select.options; Als nächstes müssen wir dem Click-Ereignis der Schaltfläche einen Ereignis-Listener ( toggle_ddl ) toggle_ddl, der das Aussehen des Datenzeichens umschaltet .
button.addEventListener ('click', toggle_ddl); Dann definieren wir die Funktion toggle_ddl() . Um dies zu tun, müssen wir den Wert der Eigenschaft datalist.style.display überprüfen . Wenn es sich um eine leere Zeichenfolge handelt, ist der Datenverzeichner verborgen. Daher müssen wir seinen Wert auf block und auch die Schaltfläche von einem nach unten zeigenden Pfeil in einen nach oben weisenden Pfeil ändern .
Funktion toggle_ddl () {/ * wenn DDL versteckt ist * / if (datalist.style.display === '') {/ * show DDL * / datalist.style.display = 'block'; this.textContent = "Ã-²"; } sonst hide_select (); } function hide_select () {/ * hide DDL * / datalist.style.display = ''; button.textContent = "Ã-¼"; } Die Funktion " hide_select() blendet den Datennamen aus, indem er die Eigenschaft " datalist.style.display auf eine leere Zeichenfolge datalist.style.display und den Pfeil der Schaltfläche wieder nach unten zeigt.
Wenn im letzten Setup die Eingabefelder eine zuvor ausgewählte Option enthalten und die Dropdown-Liste auch durch einen späteren Klick auf die Schaltfläche ausgelöst wurde, muss die zuvor ausgewählte Option ebenfalls als ausgewählt in der Dropdown-Liste angezeigt werden.
toggle_ddl() Funktion toggle_ddl() den folgenden hervorgehobenen Code toggle_ddl() :
Funktion toggle_ddl () {/ * wenn DDL versteckt ist * / if (datalist.style.display === '') {/ * show DDL * / datalist.style.display = 'block'; this.textContent = "Ã-²"; var val = Eingabe.Wert; für (var i = 0; i Wir möchten auch die Dropdown-Liste ausblenden, wenn der Benutzer in das Eingabefeld eintippt (zu dem Zeitpunkt, zu dem der Arbeitsdatengeber erscheint).
/ * Wenn der Benutzer in ein Textfeld eingeben möchte, delete DDL * / input = document.querySelector ('input'); input.addEventListener ('focus', hide_select); 5. Aktualisieren Sie die Eingabe, wenn eine Option ausgewählt ist Abschließend fügen wir einen change Event-Handler zu Wenn der Benutzer eine Option aus der Dropdown-Liste auswählt, wird sein Wert innerhalb des Tags angezeigt
/ * Wenn der Benutzer eine Option aus DDL auswählt, schreibe sie in das Textfeld * / select.addEventListener ('change', fill_input); Funktion fill_input () {input.value = Optionen [this.selectedIndex] .value; ausblenden_select (); } Nachteile Der Hauptnachteil dieser Technik ist das Fehlen eines direkten Stils Element mit CSS (das Aussehen der und Tags variieren zwischen verschiedenen Browsern).
In Firefox wird der Eingabetext mit Optionen abgeglichen, die die Eingabezeichen enthalten, während andere Browser mit Optionen übereinstimmen, die mit diesen Zeichen beginnen . Die W3C-Spezifikation für Datenverteiler gibt nicht explizit an, wie die Zuordnung vorgenommen werden soll.
Abgesehen davon ist diese Methode gut und funktioniert in allen gängigen Browsern , während in Browsern , in denen es möglicherweise nicht funktioniert, Benutzer die Dropdown-Liste weiterhin sehen können, nur die Vorschläge werden nicht angezeigt.
Sehen Sie sich die abschließende Demo mit ein wenig CSS-Styling an:
Wie die Beleuchtung deine Stimmung beeinflusst [Infografik]
Bist du oft müde, hast Schmerzen in deinen Augen oder hast Kopfschmerzen und fühlst dich manchmal depressiv? Sie wissen es vielleicht nicht, aber das kann durch die Beleuchtung in Ihrer Umgebung verursacht werden. Die meisten von uns leben wahrscheinlich drinnen, vor einem Bildschirm und nicht draußen, unter der Wärme der Sonne.Wir
(Tech- und Design-Tipps)
de.hideout-lastation.com
2. Machen Sie den Datalist sichtbar 
Wie bereits erwähnt, aufgrund des eingebauten Verhaltens der 
