Awesomplete: Schnelles Autocomplete-Widget, individuell gestaltbar

Dass einem bei einer Sucheingabe per Dropdown eine Liste mit Autocomplete-Vorschlägen angezeigt wird, ist keine Seltenheit. Dank des HTML5-Datalist-Elements lassen sich sehr einfach und ohne JavaScript solche Autocomplete-Listen erstellen. Die Möglichkeiten, diese Listen zu konfigurieren, sind jedoch beschränkt. So lässt sich mit dem Element beispielsweise nicht definieren, ab wie vielen Eingabezeichen die Liste mit den Vorschlägen dargestellt werden soll. Auch gibt es keine Möglichkeit, Vorschläge aus anderen Listen – beispielsweise aus einer einfachen „<ul>“-Liste – zu verwenden. Die JavaScript-Bibliothek „Awesomplete“ schafft genau diese Möglichkeiten, um Autocomplete-Listen flexibler und individueller zu machen.

Sehr klein und schnell eingebunden

Die JavaScript-Datei ist in der komprimierten Fassung keine fünf Kilobyte groß. Ist sie im HTML-Kopf eingebunden, muss dem „<input>“-Element, welches „Awesomplete“ verwenden soll, nur noch die Klasse „awesomplete“ zugewiesen werden. Anschließend hat man mehrere Möglichkeiten, wie man das Widget verwenden möchte. Zunächst kann man beim „<datalist>“-Element bleiben, um Vorschläge für die Autovervollständigung zu definieren.

<input type="text" list="suchbegriffe" class="awesomplete" />

<datalist id="suchbegriffe">
  <option>Webdesign</option>
  <option>Webentwicklung</option>
  <option>…</option>
</datalist>

Im Beispiel wird eine klassische Dataliste erstellt, welche wir über die ID einem Eingabefeld zuweisen. Normalerweise würde bei entsprechender Eingabe ins Suchfeld eine Standard-Dropdown-Liste mit den Vorschlägen erscheinen. „Awesomplete“ hingegen stellt die Suchvorschläge als gestaltbare „<ul>“-Liste dar. Hier hat man mit CSS also die Möglichkeit, das Aussehen der Liste individuell anzupassen. Das Widget sorgt dafür, dass sowohl das „<input>“-Element als auch die „<ul>“-Liste in einem „<div>“-Container mit der Klasse „awesomplete“ platziert sind. Über den Container und die Klasse kann man nun die Gestaltung von Eingabefeld und Liste individuell festlegen. „Awesomplete“ liefert auch gleich ein eigenes Stylesheet mit, welches die Liste in Form eines Tooltipps darstellt.

Vergleich zwischen Standardliste (links) und „Awesomplete“-Liste (rechts)

Alternative Listen verwenden

Während per HTML nur das „<datalist>“-Element für die Autocomplete-Funktion in Frage kommt, ermöglicht „Awesomplete“ auch alternative Listen. Will man beispielsweise eine bestehende Liste über ein Eingabefeld durchsuchbar machen, kann man diese Liste einem Eingabefeld zuordnen.

<input type="text" data-list="#suchbegriffe" class="awesomplete" />

<ul id="suchbegriffe">
  <li>Webdesign</li>
  <li>Webentwicklung</li>
  <li>…</li>
</ul>

Im Beispiel wird eine einfache „<ul>“-Liste einem Eingabefeld zugeweisen. Statt des Attributs „list“ wird hier jedoch das Data-Attribut „data-list“ verwendet, um die Liste zuzuweisen. Außerdem muss der ID der zu verwendenden Liste eine Raute vorangestellt werden. Das Beispiel funktioniert dann genau wie die Variante mit dem „<datalist>“-Element.

Als dritte Möglichkeit erlaubt es „Awesomplete“ auch, die Vorschläge für die Autovervollständigung per Data-Attribut direkt im „<input>“-Element unterzubringen. Dazu werden einfach alle Begriffe ins Attribut „data-list“ geschrieben.

<input type="text" data-list="Webdesign, Webentwicklung, …" class="awesomplete" />

Individuelle Konfiguration

Eine weitere Stärke von „Awesomplete“ sind die verschiedenen Einstellungsmöglichkeiten. So lässt sich beispielsweise festlegen, ab wie vielen eingegebenen Zeichen die Autovervollständigung anspringen soll. Normalerweise werden ab dem zweiten Zeichen Vorschläge gemacht.

new Awesomplete(document.getElementsByTagName("input")[0], {
  minChars: 1,
  maxItems: 1,
  autoFirst: true
});

Über den Konstruktor „Awesomplete()“ nehmen wir alle Einstellungen vor. Erwartet werden zwei Parameter. Der erste gibt das Element an, auf welches die Einstellungen angewendet werden sollen. Im Beispiel ist es das erste „<input>“-Element innerhalb eines HTML-Dokumentes. Anschließend werden alle Konfigurationsparameter über ein Objektliteral angegeben.

Der Parameter „minChars“ gibt die Anzahl der Zeichen an, die mindestens eingegeben werden müssen, damit eine Vorschlagsliste erscheint. Über „maxItems“ wird die maximale Anzahl der angezeigten Einträge definiert.

Über den Parameter „autoFirst“ ist es möglich, das erste dargestellte Element automatisch auszuwählen. Dadurch erspart man sich einen Klick auf das erste Element, wenn man es ins Eingabefeld übernehmen möchte. Stattdessen genügt ein Return per Tastatur.

Per Events reagieren

Um auch auf Interaktionen mit der Vorschlagsliste reagieren zu können, gibt es eigene Events, die beispielsweise ausgelöst werden, wenn ein Element aus der Liste ausgewählt wurde. Die Events lassen sich per „addEventListener()“ anwenden und unterscheiden sich somit nicht von nativen Ereignissen.

document.getElementsByTagName("input")[0].addEventListener("awesomplete-select", function() {
  alert("Sie haben einen Suchbegriff ausgewählt.");
}, false);

Im Beispiel wird ein Alert ausgegeben, wenn ein Begriff aus der Liste ausgewählt wurde. Es stehen mehrere Events zur Verfügung, die alle mit „awesomplete-“ eingeleitet werden.

Fazit und Link zum Beitrag

Wem die Standardmöglichkeiten für Autocomplete-Listen nicht ausreichen, findet bei „Awesomplete“ eine große Fülle an individuellen Gestaltungs- und Konfigurationsmöglichkeiten. Das Widget ist gut dokumentiert und steht unter der verbreiteten MIT-Lizenz, die eine kostenfreie Nutzung erlaubt.

• Awesomplete

(dpe)