nicht angemeldet
Hallo,
die deutsche Wikipedia-Seite hat diese "onthefly" Abfrage drin, also direkt bei der Eingabe werden Vorschläge angezeigt. Hat jemand eine Idee bzw. Script, wie ich so etwas realisieren kann?
Mit Ajax. Diese Vorschläge kommen ja irgendwoher. Wenn man nur zehn Vorschläge hat, kann man diese dem Javascript ja gleich weiter geben. Bei ganz, ganz vielen möglichen Vorschlägen wie bei der Wikipedia oder gar Google wird das Suchen nach möglichen Vorschlägen vom Server übernommen, damit nicht so viele, nämlich alle Daten über die Leitung geschoben werden müssen. Dazu muss die live im Browser angezeigte Seite noch mal mit dem Server kommunizieren können. Dazu braucht man das XMLHttpRequest; das Prinzip wird mit dem Buzzword Ajax zusammengefasst.
Der Ablauf sieht ungefähr so aus:
1. Der Nutzer tippt etwas wie „X“ ins Input-Feld
2. Der Event-Handler onkeyup merkt das und ruft eine Funktion A auf.
3. Diese Funktion B nimmt ein XMLHttpRequest-Objekt und schickt damit über HTTP einen Request an - sagen wir mal - http://example.com/search.php?query=X.
4. Das serverseitige Skript search.php erledigt die serverseitige Suche und schickt die Resultate zurück an den Browser. Idealerweise in einem Format, das bequem von JS verarbeitet werden kann, wie z.B. JSON oder gleich in einem HTML-Fragment
5. Vereinfacht: Unter onreadystatechange wird am XMLHttpRequest-Objekt eine Funktion hinterlegt, die immer aufgerufen wird, wenn sich der aktuelle Status des HTTP Requests verändert. Daran merkt man auch, wenn der Request erfolgreich war - dort werden dann die Daten vom Attribut responseText entgegen genommen, in JS- oder HTML-Objekte verwandelt und an Funktion B übergeben.
6. Funktion B ist nun dazu zuständig, die Ergebnisdaten in HTML zu wandeln und ins Dokument einzufügen; idealerweise so, dass sie wie in Dropdown aussehen. Das ist dann aber Sache von CSS.
Übrigens: Der Nutzer tippt ja weiter. Es ist etwas doof, für jeden neuen Buchstaben einen neuen Request zu erstellen. Idealerweise nutzt man ein- und dasselbe XHR-Objekt weiter und cancelt vorherige Requests mit abort(). Und man muss auch nicht gleich beim ersten Buchstaben anfangen zu suchen, ich würde sagen drei Buchstaben sind ein gutes Maß.
• The XMLHttpRequest Object ist eine nette Übersicht über das zentrale Objekt.
• Ajax Patterns: Live Search diskutiert verschiedene Details rund um dieses Schema.
Tim