Autovervollständigungen erleichtern dem Benutzer die Eingabe und sehen zudem sehr schick aus. Eine Möglichkeit um Autocomplete zu realisieren ist die Verwendung von scriptaculous.
Dabei müssen folgende Regeln beachtet werden:
- Zuerst „Prototype“ im head-Bereich einbinden
- Danach „script.aculo.us“ im head-Bereich einbinden
- Dem, für die Autocompletion gewünschten, Textfeld eine ID zuweisen
- Einen leeren DIV-Container mit ID für die Autocomplete-Ergebnisse erstellen
- Liste für die Werte zur Vervollständigung erstellen
- Den new Ajax.Autocompleter(...)-Aurfruf im body-Tag (!) durchführen
Bei Nichteinhaltung kann es zum Fehler this.element is null in control.js (Zeile 53) bei this.oldElementValue = this.element.value; kommen.
Ein weiterer beliebter Fehler ist Ajax.Autocompeter is not a constructor. Dieser Fehler basiert im Wesentlichen darauf, dass die Abhängigkeiten nicht gefunden wurden.
Die häufigsten Gründe dafür sind:
- prototype.js und/oder scriptaculous.js wurden nicht eingebunden
- prototype.js wurde nicht vor scriptaculous.js eingebunden
- scriptaculous.js befindet sich ohne abhängige Includes (z.B. control.js) auf dem Server
- Das DOM ist nicht valide
Funktionsweise von Ajax.Autocompleter
Protoype stellt das Objekt „Ajax“ zur Verfügung, welches von „script.aculo.us“ um den „Autocompleter“ erweitert wird. Der Konstruktor von Ajax.Autocompleter erwartet bei der Initialisierung vier Parameter. Als Erstes die ID des Textfeldes, welches vervollständigt werden soll. Dann die ID des DIV-Containers, in den die Vorschläge zur Vervollständigung geschrieben werden sollen. Danach wird die Adresse angegeben, von welcher die Vorschläge bezogen werden, und als Letztes wird ein Array von optionalen Parametern (wie z.B. der Mindestlänge von Eingabezeichen) übergeben.
Bei Eingabe in das Textfeld sendet der Autocompleter dann einen POST-Request an die Seite, welche als dritter Parameter angegeben wurde. Der Wert des POST-Request entspricht dem aktuellen Eingabetext im Textfeld. Als POST-Parameter wählt der Autocompleter die ID des Textfeldes oder (wenn vorhanden) den Attributwert name des Textfeldes. Das Skript, an das der POST-Request gesendet wird, muss nun die in Frage kommenden Begriffe für die Vervollständigung als ungeordnete Liste (ol) zurück liefern. Diese Liste wird dann in einem DIV-Container (2. Parameter von Autocompleter) dargestellt.
Als Empfangs-Skript eignet sich eine PHP-Datei, die eine Datenbank-Verbindung aufbaut und anhand des empfangenen POST-Wertes nach den entsprechenden Einträgen sucht (z.B. mit "SELECT name FROM user WHERE username LIKE '".$_POST['input_name']."';") und dann diese als Liste zurück liefert. Weil solche Skripte sehr benutzerspezifisch sind, habe ich in meinem Code-Beispiel darauf verzichtet und dafür nur eine statische HTML-Datei (completion.html) verwendet. Der Nachteil daran ist, dass der Autocompleter immer alle Werte von completion.html ausgibt. Egal, was für ein Wert im Textfeld steht.
Code-Beispiel
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html>
<head>
<title>script.aculo.us - Ajax.Autocompleter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
</head>
<body>
<input id="input_id" name="input_name" type="text" />
<div id="completion_id"></div>
<script type="text/javascript">
new Ajax.Autocompleter( 'input_id', 'completion_id', '/completion.html', {} );
</script>
</body>
</html> |
completion.html
1 2 3 4 5 6 7 | <ul> <li>Affe</li> <li>Bär</li> <li>Chameleon</li> <li>Dodo</li> <li>Elefant</li> </ul> |
Für weitere Informationen siehe Ajax.Autocompleter Refrerenz oder Autocompletion with Scriptaculous and Ajax.