Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » JavaScript & jQuery » Awesomplete: Schnelles Autocomplete-Widget, individuell gestaltbar

Awesomplete: Schnelles Autocomplete-Widget, individuell gestaltbar

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 3 Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 16. April 2015
Bookmarke mich
Share on pocket

HELD Werbeagentur

DAZECON - Webdesign und Marketing Leipzig

VABELHAVT

Dunkel Design | Webdesign Grafikdesign Logodesign

ARIT Services GmbH

Webagentur klickbeben

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.

awesomplete-teaser

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.

awesomplete

<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.

awesomplete_vergleich
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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

Evergreen Media

Innsbruck

Fotografie Jennifer Klüpfel

Bodenheim

design andrea becker

Frankfurt am Main

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

DRWA Das Rudel Werbeagentur

Freiburg im Breisgau

Alle Agenturpartner

Jobs

Frontend Development & Project Management

Remote

WordPress Developer – Vollzeit

Remote

Junior SEO Manager in München

München

Online Marketing Manager

München

Business Development Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

3 Antworten zu „Awesomplete: Schnelles Autocomplete-Widget, individuell gestaltbar“
— was ist Deine Meinung?

  1. Theo sagt:
    16. April 2015 um 21:07 Uhr

    Es klingt nicht nur gut, es ist gut! Danke für den Beitrag!

    Antworten
  2. ati sagt:
    16. April 2015 um 10:09 Uhr

    Ha! Das brauche ich. Vielen Dank!

    Antworten
    1. Denis Potschien sagt:
      16. April 2015 um 11:13 Uhr

      Gern geschehen!

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.