Sie befinden sich hier:
» 
» 
04.01.2016

Multiline Autocomplete-Box mit jQuery und jQuery-UI

Kategorie(n): Programmierung

Als quasi-Standard haben sich Lösungen basierend auf jQuery in Verbindung mit jQuery-UI etabliert. Für einfache Autocomplete Funktionalitäten gibt es genügend Beispiele im Internet. Hier möchte ich ein etwas komplexeres Beispiel erläutern, welches viele Einzelfunktionalitäten vereint.

Funktionalitäten dieser Autocomplete-Box

Das hier beschriebene Beispiel enthält folgende Funtionalitäten:

  • Vorschlagsliste mehrzeilig (multiline)
  • der Eingabewert wird farblich hervorgehoben
  • Datenquelle liegt auf einem anderen Server
  • Treffermenge wird gecached, um unnötige Server-Roundtrips zu vermeiden
  • selektiertes Ergebnis wird in eine Division übernommen
multiline autocomplete box

HTML-Seite für Autocomplete

Um die Autocomplete-Funktionalität zu nutzen, müssen diverse Javascript- und Stylesheet-Informationen ergänzt werden.

Im Seiten-Header muss z.B. das jQuery-UI CSS-File ergänzt werden, gefolgt von einem optionalen CSS-File (hier autocomplete-style.css), welches individuelle autocomplete-Formatierungen enthält. Diese individuellen Formatierungen können natürlich auch in ein bereits vorhandenes CSS-File integriert werden - vorausgesetzt es folgt nach dem jQuery-UI CSS-File.

Im Body-Bereich muss natürlich das Input-Feld selbst ergänzt werden (mit einer eindeutigen ID). Am Ende des Body-Bereiches müssen jquery.js, jquery-ui.js und ein weiteres JS-File (hier autocomplete-functions.js) enthalten sein, welches den individuellen Code enthält. Für jquery.js und jquery-ui.js bieten sich minimierte Versionen an. Falls Sie aus jquery-ui nur die autocomplete-Funktionalität nutzen wollen, bietet es sich ebenfalls an, über den jQuery-UI Download-Builder sich nur den hierfür notwendigen Code zusammenzustellen und herunterzuladen.

Das Grundgerüst sieht somit wie folgt aus:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="./scripts/jquery-ui.min.css"/>
  <link rel="stylesheet" type="text/css" href="./scripts/autocomplete-style.css" />
</head>
<body>
  <div class="ui-widget">
    <label for="SearchBox">Search:</label>
    <input id="SearchBox" />
  </div>
  <script type="text/javascript" src="./scripts/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="./scripts/jquery-ui.min.js"></script>
  <script type="text/javascript" src="./scripts/autocomplete-functions.js"></script>
</body>
</html>

Javascript für Multiline-Autocomplete Funktionalität

Das eigentliche Herzstück in diesem Beispiel ist das File autocomplete-functions.js. Darin ist die Funktionalität enthalten, die a) die Daten über einen AJAX-Call aus einer Datenbank liest und b) die Ergebnisse in der Autocomplete-Vorschau mehrzeilig darstellt.

Das Grundprinzip ist wie folgt:

  • Die gesamte Funktionalität wird an den onFocus-Event des Input-Feldes gebunden.
  • Erst ab einer Eingabelänge von 2 Zeichen erfolgt die Suche im Datenbestand (minLength: 2)
  • In „source“ wird ein AJAX-Call abgesetzt. Als Datentyp wird hierbei jsonp verwendet, da die Datenquelle auf einem anderen Server liegt. Json würde in diesem Fall nicht funktionieren wegen der „same origin policy“.
  • Als Ergebnis wird ein JSON-Callback-Array zurückliefert.
  • Das Ergebnis wird in einer Variable (cache) gecached, damit bei nochmaligem Aufruf der Roundtrip zum Server gespart werden kann.
  • Das Ergebnis wird individuell formatiert und mehrzeilig ausgegeben.
  • Der Eingabewert (term) wird in der Vorschlagsliste farblich markiert.
  • In „select“ wird der markierte mehrzeilige Autocomplete-Vorschlag in eine Division übernommen. Es ist aber ebenso möglich, einzelne editierbare Felder zu befüllen, um danach die Einträge weiter editieren zu können.

Um die Übersichtlichkeit zu wahren, habe ich darauf verzichtet, hier auf dieser Webseite das Script detailliert zu beschreiben. Die erläuternden Kommentare sind in autocomplete-functions.js enthalten und können dort direkt eingesehen werden.

Datenbank-Request zur Befüllung der Autocomplete-Vorschlagsliste

Auch hier sind die detaillierten Erläuterungen direkt im File (reqAddressData.php) zu finden. Deshalb nur kurz die wesentliche Logik erläutert:

  • Zu Beginn des Scriptes stehen (auskommentiert) die Statements, um die Datenbankstruktur und ein paar Testsätze zu erzeugen (mySQL)
  • Die Eingabe ($_GET['term']) kann sowohl aus einem Term, als auch aus mehreren Termen bestehen. Das Leerzeichen wird hierbei als Trenner zwischen den jeweiligen Termen betrachtet.
  • Mehrere Terme werden bei der Datenbankabfrage mit „and“ verknüpft.
  • Es wird generell teilqualifiziert mit „like“ gesucht.
  • Um nicht mit jedem eingegebenen Term in jedem Feld (z.B. Company, Street, Location,...) suchen zu müssen, wird ein Index-Feld (adrindex) mitgeführt, welches als Inhalt die gesamten Content der Einzelspalten enthält. Die Pflege dieses Index erfolgt automatisch per Trigger.
  • Um SQL-Injection vorzubeugen, wird das Select-Statement als Parameter-Abfrage abgesetzt.
  • Das Ergebnis wird als JSON-Callback-Array zurückgegeben.

Fazit

Eine Autocomplete-Funktionalität zu implementieren erfordert nicht unbedingt Fachwissen auf höchstem Niveau. Unzählige Beispiele sind im Netz vorhanden. Hinzu kommt eine ausführliche Dokumentation auf jQuery-UI. Darüber hinaus soll dieses - etwas komplexere - Beispiel zeigen, was über „Standard“ hinaus möglich ist. Das hier erläuterte Beispiel ist natürlich auch als Download verfügbar und kann nach Belieben verändert bzw. „ausgeschlachtet“ werden.

Praxis-Links

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

93