Ajax.Autocompleter mit scriptaculous

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:

  1. Zuerst „Prototype“ im head-Bereich einbinden
  2. Danach „script.aculo.us“ im head-Bereich einbinden
  3. Dem, für die Autocompletion gewünschten, Textfeld eine ID zuweisen
  4. Einen leeren DIV-Container mit ID für die Autocomplete-Ergebnisse erstellen
  5. Liste für die Werte zur Vervollständigung erstellen
  6. 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

Ajax.Autocompleter mit scriptaculous weiterlesen