Leichtgewichtige Autovervollständigungssteuerungen mit dem HTML5-Datalist

In diesem Tutorial tauchen wir tief in das wenig genutzte HTML5-Element <datalist> ein. Es ermöglicht eine leichtgewichtige, zugängliche, browserübergreifende Autovervollständigung für Formulare, die kein JavaScript erfordert.

Was ist los mit <select>?

HTML5 <select>-Steuerelemente sind ideal, wenn der Benutzer aus einer kleinen Auswahl von Optionen wählen soll. Sie sind weniger praktisch, wenn:

• es viele Optionen gibt, wie z.B. Länder oder Berufstitel
• der Benutzer eine eigene Option eingeben möchte, die nicht auf der Liste steht

Die offensichtliche Lösung ist ein Autovervollständigungssteuerelement. Dies ermöglicht es dem Benutzer, einige Zeichen einzugeben, was die verfügbaren Optionen einschränkt und die Auswahl schneller zu ermöglichen.

<select> springt beim Starten des Tippens an die richtige Stelle, aber das ist nicht immer offensichtlich. Es funktioniert nicht auf allen Geräten (wie Touchscreens) und setzt sich innerhalb von einer bis zwei Sekunden zurück.

Entwickler greifen häufig auf eine der vielen JavaScript-basierten Lösungen zurück, aber ein benutzerdefiniertes Autovervollständigungssteuerelement ist nicht immer notwendig. Das HTML5-Element <datalist> ist leichtgewichtig, zugänglich und hat keine Abhängigkeiten von JavaScript. Sie könnten gehört haben, dass es fehleranfällig ist oder keine Unterstützung hat. Das stimmt aber in 2021 nicht, obwohl es Browserinkonsistenzen und Einschränkungen gibt.

`

Aus einer Liste mit über 200 Optionen das eigene Land auszuwählen, ist ein idealer Anwendungsfall für eine Autovervollständigung. Definieren Sie ein `

<datalist id="countrydata">
  <option>Afghanistan</option>
  <option>Åland Islands</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antarctica</option>
  ...etc...
</datalist>

Die ID des Datalists kann dann über ein `list`-Attribut in jedem `` Feld referenziert werden:

<label for="country">country</label>

<input type="text"
  list="countrydata"
  id="country" name="country"
  size="50"
  autocomplete="off" />

Verwirrenderweise ist es am besten, `autocomplete=“off“` zu setzen. Dies stellt sicher, dass dem Benutzer Werte im `

Das Ergebnis:

Dies ist die Standarddarstellung in Microsoft Edge. Andere Anwendungen implementieren ähnliche Funktionalität, aber das Erscheinungsbild unterscheidet sich je nach Plattform und Browser.

`` Optionen

Das Verwenden des Labels als Textkind eines `` ist üblich:

<datalist id="mylist">
  <option>label one</option>
  <option>label two</option>
  <option>label three</option>
</datalist>

Das Verwenden eines `value`-Attributs ergibt identische Ergebnisse:

<datalist id="mylist">
  <option value="label one" />
  <option value="label two" />
  <option value="label three" />
</datalist>

Hinweis: Die schließende Slash `/>` ist in HTML5 optional, kann aber dazu beitragen, Coding-Fehler zu vermeiden.

Sie können auch einen Wert gemäß einer gewählten Bezeichnung mit einer der folgenden Formate festlegen.

Option 1:

<datalist id="mylist">
  <option value="1">label one</option>
  <option value="2">label two</option>
  <option value="3">label three</option>
</datalist>

Option 2:

<datalist id="mylist">
  <option value="1" label="label one" />
  <option value="2" label="label two" />
  <option value="3" label="label three" />
</datalist>

In beiden Fällen wird das Eingabefeld auf `1`, `2` oder `3` gesetzt, wenn eine gültige Option gewählt wird, aber die Benutzeroberfläche variiert je nach Browser:

• Chrome zeigt eine Liste mit sowohl dem Wert als auch dem Label. Sobald eine Option gewählt wird, bleibt nur der Wert übrig.
• Firefox zeigt eine Liste mit dem Label allein. Es wechselt zum Wert, sobald eine Option gewählt wird.
• Edge zeigt nur den Wert.

Das folgende CodePen-Beispiel zeigt alle Variationen:

Sehen Sie sich die Stiftung
HTML5 <datalist> Autovervollständigungsbeispiele von SitePoint (@SitePoint)
auf CodePen.

Implementierungen werden sich weiterentwickeln, aber bis dahin würde ich Ihnen raten, weder einen Wert noch ein Label zu verwenden, da es Benutzer wahrscheinlich verwirren wird. (Ein Umgehungsweg wird weiter unten diskutiert.)

<datalist> Browserunterstützung und Fallbacks

Der <datalist> Element wird von modernen Browsern sowie Internet Explorer 10 und 11 gut unterstützt:

Es gibt mehrere Implementierungsnotizen, aber sie werden die meisten Anwendungen nicht beeinflussen. Das Schlimmste, was passieren könnte, ist, dass ein Feld auf eine normale Texteingabe zurückfällt.

Wenn Sie unbedingt IE9 und früher unterstützen müssen, gibt es ein Fallback-Muster, das eine normale <select> in Verbindung mit einer Texteingabe verwendet, wenn die <datalist> versagt. Anpassen des Länderbeispiels:

<label for="country">country</label>

<datalist id="countrydata">

  <select name="countryselect">
    <option></option>
    <option>Afghanistan</option>
    <option>Åland Islands</option>
    <option>Albania</option>
    <option>Algeria</option>
    <option>American Samoa</option>
    <option>Andorra</option>
    <option>Angola</option>
    <option>Anguilla</option>
    <option>Antarctica</option>
    ...etc...
  </select>

  <label for="country">or other</label>

</datalist>

<input type="text"
  id="country" name="country"
  size="50"
  list="countrydata"
  autocomplete="off" />

Sehen Sie sich die Pen
HTML5 <datalist> autocomplete fallback von SitePoint (@SitePoint)
auf CodePen.

In modernen Browsern werden die <option>-Elemente Teil des <datalist> und die „oder andere“-Bezeichnung wird nicht angezeigt. Es sieht identisch zum obigen Beispiel aus, aber ein countryselect Formularwert wird auf eine leere Zeichenkette gesetzt.

In IE9 und darunter sind sowohl das (sehr lange) <select> als auch die Texteingabefelder aktiv:

Beide Werte konnten in alten IEs eingegeben werden. Ihre Anwendung muss entscheiden, ob:

• der eine oder der andere am gültigsten ist, oder
• eine kleine JavaScript-Funktion verwenden, um den einen zurückzusetzen, wenn der andere geändert wird

Verwenden von <datalist> auf Nicht-Text-Steuerelementen

Chrome-basierte Browser können <datalist>-Werte auch auf:

1. Eine Eingabe mit dem Typ "date". Der Benutzer kann aus einer Reihe von Optionen wählen, die als YYYY-MM-DD-Werte definiert sind, aber in ihrer lokalen Formatierung dargestellt werden.

2. Ein Eingabefeld vom Typ "color". Der Benutzer kann aus einer Auswahl von Farboptionen wählen, die als sechsstellige Hexadezimalwerte definiert sind (dreistellige Werte funktionieren nicht).

3. Ein Eingabefeld vom Typ "range". Der Schieberegler zeigt Strichmarken, obwohl dies nicht beschränkt, welcher Wert eingegeben werden kann.

Siehe die Pen
HTML5 <datalist> auf anderen Eingabetypen von SitePoint (@SitePoint)
auf CodePen.

<datalist> CSS-Stilung

Wenn Sie sich jemals mit dem Styling eines <select> Feldes herumschlagen mussten, … hatten Sie es leicht!

Ein <input> kann normal gestaltet werden, aber eine verknüpfte <datalist> und ihre untergeordneten <option> Elemente können nicht in CSS gestaltet werden. Die Listenausgabe wird vollständig vom Plattform und Browser bestimmt.

I hope this situation improves, but for now, a solution is proposed at MDN which:

1. überschreibt das Standardverhalten des Browsers
2. behandelt die <datalist> effektiv wie ein <div> damit sie in CSS gestaltet werden kann
3. repliziert alle Autovervollständigungsfunktionen in JavaScript

I’ve enhanced it further and the code is available on GitHub. To use it, load the script anywhere in your HTML page as an ES6 module. The jsDelivr CDN URL can be used:

<script src="https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js"></script>

Oder Sie können es mit npm installieren, wenn Sie einen Bundler verwenden:

npm install datalist-css

Ihre <datalist> Elemente müssen das Format <option>value</option> verwenden. Zum Beispiel:

<datalist id="mylist">
  <option>label one</option>
  <option>label two</option>
  <option>label three</option>
</datalist>

Hinweis: <option value="value" /> kann nicht verwendet werden, da es zu einem leeren Element führt, das nicht gestaltet werden kann!

CSS kann dann hinzugefügt werden, um einige oder alle <datalist> und <option> Elemente zu gestalten. Zum Beispiel:

datalist {
  position: absolute;
  max-height: 20em;
  border: 0 none;
  overflow-x: hidden;
  overflow-y: auto;
}

datalist option {
  font-size: 0.8em;
  padding: 0.3em 1em;
  background-color: #ccc;
  cursor: pointer;
}

/* Stil der aktiven Option */
datalist option:hover, datalist option:focus {
  color: #fff;
  background-color: #036;
  outline: 0 none;
}

Beispiel:

Sehen Sie sich die Pen
HTML5 <datalist> Autovervollständigung CSS-Styling von SitePoint (@SitePoint)
auf CodePen.

Das Styling funktioniert, aber lohnt sich der Aufwand? Ich vermute nicht …

• Die Neuimplementierung der Standardtastatur, Maus- und Touchsteuerungen des Browsers mit angemessener Barrierefreiheit ist schwierig. Das MDN Beispiel unterstützt keine Tastaturereignisse und obwohl ich versucht habe es zu verbessern, wird es unvermeidlich Probleme auf einigen Geräten geben.
• Sie vertrauen auf 200 Zeilen JavaScript, um ein CSS-Problem zu lösen. Es minifiziert auf 1,5 kB, könnte jedoch Leistungsprobleme verursachen, wenn Sie viele lange <datalist> Elemente auf derselben Seite benötigen.
• Wenn JavaScript eine Voraussetzung ist, wäre es dann besser, eine hübschere, konsistentere, bewährte JavaScript-Komponente zu verwenden?

Der Rückfall erfolgt auf eine standardmäßige HTML5-<datalist>-Steuerung ohne Stil, wenn JavaScript versagt, aber das ist ein kleiner Vorteil.

Erstellen einer Ajax-verbesserten <datalist>

Angenommen, Ihr Designer ist damit einverstanden, Browser-Styling-Unterschiede zu akzeptieren, ist es möglich, die Standardfunktionalität von <datalist> mit JavaScript zu verbessern. Zum Beispiel:

1. Implementieren Sie optionale Validierung, die nur einen bekannten Wert im <datalist> akzeptiert.
2. Setzen Sie <option>-Elemente aus Daten, die von Ajax-Aufrufen an Such-APIs zurückgegeben werden.
3. Setzen Sie andere Feldwerte, wenn eine Option ausgewählt wird. Zum Beispiel setzt die Auswahl von “Vereinigte Staaten von Amerika” “US” in einem versteckten Eingabefeld.

Der Code muss hauptsächlich <option>-Elemente neu definieren, obwohl es mehrere Programmierüberlegungen gibt:

• Ein Ajax-API-Anfrage sollte nur dann erfolgen, wenn eine bestimmte Mindestanzahl von Zeichen eingegeben wurde.
• Tipp-Ereignisse sollten entdröhnt werden. Das heißt, ein Ajax-Aufruf wird nur ausgelöst, wenn der Benutzer seit mindestens einer halben Sekunde nicht mehr tippt.
• Abfrageergebnisse sollten zwischengespeichert werden, damit es nicht notwendig ist, identische Anfragen zu wiederholen oder zu parsen.
• Unnötige Abfragen sollten vermieden werden. Zum Beispiel liefert die Eingabe von “un” 12 Länder zurück. Es besteht keine Notwendigkeit, weitere Ajax-Aufrufe für “unit” oder “united” zu tätigen, da alle resultierenden Optionen in den ursprünglichen 12 Ergebnissen enthalten sind.

I’ve created a standard Web Component for this, and the code is available on GitHub. The CodePen example below allows you to select a valid country after entering at least two characters. A music artist autocomplete then returns artists who originated in that country with names matching the search string:

Siehe die Pen
HTML5 <datalist> mit Ajax-Autovervollständigung von SitePoint (@SitePoint)
auf CodePen.

• Die Länderabfrage-API wird von restcountries.eu bereitgestellt.
• Die Musikkünstlerabfrage-API wird von musicbrainz.org zur Verfügung gestellt.

Um sie in Ihrer eigenen Anwendung zu verwenden, lade das Skript an beliebiger Stelle in Ihrer HTML-Seite als ES6-Modul. Die jsDelivr CDN-URL kann verwendet werden:

<script src="https://cdn.jsdelivr.net/npm/datalist-ajax/dist/datalist-ajax.min.js"></script>

Oder Sie können es mit npm installieren, wenn Sie einen Bundler verwenden:

npm install datalist-ajax

Erstellen Sie ein <auto-complete>-Element mit einem Kind-<input>, das als Dateneingabefeld verwendet wird. Zum Beispiel verwendet die Länderabfrage dies:

<label for="country">country lookup:</label>

<auto-complete
  api="https://restcountries.eu/rest/v2/name/${country}?fields=name;alpha2Code;region"
  resultname="name"
  querymin="2"
  optionmax="50"
  valid="please select a valid country"
>
  <input type="text" id="country" name="country" size="50" required />
</auto-complete>

<auto-complete>-Elementattribute:

attribute	description
api	the REST API URL (required)
resultdata	the name of the property containing a result array of objects in the returned API JSON (not required if only results are returned)
resultname	the name of the property in each result object which matches the search input and is used for datalist <option> elements (required)
querymin	the minimum number of characters to enter before a search is triggered (default: 1)
inputdelay	the minimum time to wait in milliseconds between keypresses before a search occurs (default debounce: 300)
optionmax	the maximum number of autocomplete options to show (default: 20)
valid	if set, this error message is shown when an invalid value is selected

Die REST-URL muss mindestens einen ${id}-Bezeichner enthalten, der durch den im <input> mit diesem id gesetzten Wert ersetzt wird. Im obigen Beispiel referenziert ${country} in der api-URL den Wert im untergeordneten <input>, der ein id von "country" hat. Normalerweise verwendet die URL das untergeordnete Eingabefeld, kann aber auch andere Felder auf der Seite referenzieren.

Die restcountries.eu API gibt ein einzelnes Objekt oder ein Array von Objekten mit Ländernachrichten zurück. Zum Beispiel:

[
  {
    "name": "Cyprus",
    "alpha2Code": "CY",
    "region": "Europe"
  },
  {
    "name": "Sao Tome and Principe",
    "alpha2Code": "ST",
    "region": "Africa"
  },
  {
    "name": "Andorra",
    "alpha2Code": "AD",
    "region": "Europe"
  }
]

Das resultdata-Attribut muss nicht gesetzt werden, da dies die einzige zurückgegebene Daten ist (es gibt kein Wrapper-Objekt). Das resultname-Attribut muss auf "name" gesetzt werden, da dieses Attribut verwendet wird, um datalist <option>-Elemente aufzufüllen.

Andere Felder können automatisch ausgefüllt werden, wenn eine Option gewählt wird. Die folgenden Eingaben erhalten die "alpha2Code" und "region"-Eigenschaftsdaten, da ein data-autofill-Attribut gesetzt wurde:

<input data-autofill="alpha2Code" type="text" id="countrycode" name="countrycode" readonly />

<input data-autofill="region" type="text" id="region" name="region" readonly />

Wie datalist-ajax funktioniert

Sie können diesen Abschnitt überspringen, wenn Sie es vorziehen, die 230 Codezeilen nicht zu lesen und die Magie am Leben zu erhalten!

Das Code-Snippet erstellt zunächst ein neues <datalist> innerhalb des <auto-complete>, das es mithilfe eines list-Attributs an das untergeordnete <input> anhängt. Ein input-Ereignishandler überwacht das <input> und ruft die Funktion runQuery() auf, sobald eine Mindestanzahl von Zeichen eingegeben wurde und der Benutzer nicht mehr tippt.

runQuery() erstellt die API-URL aus den Formulardaten und führt eine Ajax-Anfrage mit dem Fetch API durch. Die zurückgegebene JSON wird analysiert, anschließend wird ein wiederverwendbarer DOM-Fragment, das <option>-Elemente enthält, erstellt und in einer Cache-Struktur abgelegt.

A datalistUpdate() function is called, which updates the <datalist> with the appropriate cached DOM fragment. Further calls to runQuery() avoid Ajax calls if a query has already been cached or a previous query can be used.

A change event handler also monitors the <input>, which is triggered when focus is moved from the field and the value has been modified. The function checks that the value matches a known option and, if necessary, uses the Constraint Validation API to show the error message provided in the valid attribute.

Unter der Annahme, dass eine gültige Option ausgewählt wurde, füllt die Änderungshandler-Funktion alle Felder mit den entsprechenden data-autofill-Attributen auf. Eine Referenz zu den Auto-Fill-Feldern wird beibehalten, um sie bei einer später eingegebenen ungültigen Option zurückzusetzen.

Es ist zu beachten, dass das shadow DOM nicht verwendet wird. Dies stellt sicher, dass die Auto-Complete <input> (und <datalist>)-Elemente mit CSS gestylt und gegebenenfalls von anderen Skripten zugänglich gemacht werden können.

Dunkin’ <datalist>

Das HTML5 <datalist> weist zwar Einschränkungen auf, ist aber ideal, wenn Sie ein einfaches, framework-unabhängiges Auto-Complete-Feld benötigen. Die fehlende CSS-Unterstützung ist bedauerlich, doch könnten Browserhersteller diesen Mangel irgendwann beheben.

Jeder der hier gezeigten Code und Beispiele kann für Ihre eigenen Projekte übernommen werden.

FAQs zu leichtgewichtigen Autovervollständigungssteuerelementen mit dem HTML5-Datalist-Element