Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery: AJAX-Lösungen

Autocomplete

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine klassische Anwendung von AJAX ist Autocomplete – die automatische Vorschlagsliste, wenn jemand etwas in ein Formularfeld schreibt. Sehen Sie hier, wie man das mit jQuery UI umsetzt und die Vorschläge dabei aus einer XML-Datei extrahiert.

Transkript

Ein schönes Beispiel für Ajax ist die Autocomplete Funktionalität. Das bedeutet, wenn der Benutzer in ein Feld beginnt etwas zu schreiben, erhällt er eine Liste mit Vorschlägen. Wir wollen uns ansehen, wie man so etwas umsetzt und verwenden dabei Autocomplete von jQuery UI. Hier sehen Sie ein kleines Beispiel auch, wenn ich hier tippe, bekomme ich hier Vorschäge. Im einfachsten Fall sieht es dann so aus, hier unten wird der Code angezeigt, dass Sie das Plugin aufrufen und dann die Quelle angeben und wenn sehr einfach gestrickt ist, dann ist die Quelle ein Array, was direkt in dem Dokument selbst steht. Wir wollen jetzt aber natürlich nicht, dass das Array im Dokument selbst steht, sondern wir wollen es aus einer externen Datei lesen, denn wir wollen mit Ajax arbeiten und in unserem Fall stehen die Vorschläge in einer XML Datei. Sie sehen wie die XML Datei aufgebaut ist, es gibt ein "pages" Element als Wurzelelement, da drinnen befinden sich mehrere "link" Elemente, jedes "link" Element hat einen "title" und eine "url", in dem "title" steht dann, dass was ausgelesen werden soll. Kommen wir zum Code. Wir verwenden hier jQuery UI, dafür müssen wir die entsprechenden Dateien einbinden, zum einen eine "css" Datei, wir benötigen "jquery" selbst, das "migrate" Plugin sicherheitshalber und dann "jqueryui". Außerdem haben wir ein kleines Formular, diese hat ein Inputfeld mit der ID "begriff", dass ist das Feld, in dass der Benutzer ewas schreiben soll und wir haben einen "button". Sehen wir uns dann einmal an, wie das Ganze funktioniert. Hier ist unsere Ajax Funktionalität. Wir laden die Datei "seiten.xml", das ist diese Datei mit den ganzen Inhalten und geben auch an, dass der Datentyp "xml" ist. Wenn das klappt, rufen wir eine Funktion mit Namen "verarbeiten" auf. Die kümmerst sich darum, das XML Dokument zu verarbeiten und uns eine Liste von Vorschlägen bereit zu stellen. Wenn es vollständig ist, dann erstellen wir unsere Autocomplete Funktionalität und wenn etwas nicht klappt, gibt es in diesem Fall eine Meldung auf der "console". Sehen wir uns, die Verarbeitung der XML Datei einmal an. Wir suchen da die "link" Elemente, das sind diese Elemente hier, und möchten dann die "title" haben, das ist immer der "title", und davon den "text". Und was machen wir damit? Wir erstellen uns damit ein Array, an dieser Stelle ist das Array definiert, und mit "push" häng ich die einzelnen Einträge immer ans Ende an. Okay, damit haben wir eine Liste mit Begriffen und wir können unsere Autocomplete Funktion erstellen. Wir wollen das für das "input" Element mit der ID "begriff" machen. Da geben wir dann die Quelle an, das ist "meinArray", was ich gerade erstellt habe, "minLength" gibt vor wieviel Zeichen mindestens eingegeben werden müssen, damit es einen Vorschlag gibt. Wir haben in unserem Beispiel nicht so viele Vorschläge, sodass ich das auf eins gesetzt habe, dann erscheint schon ein Vorschlag, wenn der Benutzer nur einen Buchstaben eingegeben hat. Außerdem bestimme ich was passiert, wenn der Benutzer etwas auswählt, dann möchte ich den Wert setzten auf die Auswahl und das Formular absenden. In diesem Fall, wenn das Formular abgesendet ist, verlassen wir natürlich denn Bereich von jQuery und müssen zur serverseitigen Verarbeitung kommen. Im Beispiel setzte ich "php" ein und ich möchte da nicht auf die Details eingehen, aber so viel sei gesagt, also ich lese den übergebenen Begriff aus und dann lese ich mein XML Dokument und extrahiere dort alle passende Elemente und erzeuge daraus entweder einen Link oder mehrere Links oder auch die Meldung "kein Vorschlag". Schauen wir uns das mal kurz an. Wenn ich jetzt hier etwas eintippe und das auswähle, dann hab ich eine Seite mit diesem Link und den kann ich anklicken und komme zur entspechenden Seite. Wenn ich hingegen jetzt einfach nur jQuery eingebe und abschicke, dann hab ich so eine Liste mit Links. Diese Funktionalität von der "php" Seite, finden Sie an verschiedenen Stellen im Internet, beispielsweise auch bei W3Schools als Ajax Live Search, das ist dieser Code den ich benutzt habe, und den ich nur an kleinen Stellen modifiziert habe. Das ist unsere prinzipielle Funktionalität. Man kann das natürlich an verschiedenen Stellen verbessern. Zum einen ist es derzeit so, dass ich die vollständigen Dateien von jQuery UI lade. Wenn Sie jetzt wirklich nur Autocomplete benötigen, dann sollten Sie beim Download, Bilder von jQuery UI, dass entsprechend auch auswählen. Da kann man dann sagen, welche Komponente man will, außerdem gibt auch die Möglichkeit, dass Sie das individuell gestallten mit den "Themes". Was Sie hier gesehen haben, ist die Grundfunktionalität eines Autocompletes, wobei wir auf eine externe XML Datei zugegriffen haben, die wir per Ajax geladen haben. Dann haben wir diese Datei verarbeitet, d.h. extrahiert die Inhalte, um daraus ein Array zu erstellen und das wiederum war dann die Basis für unsere Autoverfolständigung.

jQuery: AJAX-Lösungen

Lernen Sie die Vorteile von Ajax bei der Webseitenerstellung kennen und nutzen Sie die verschiedenen Austauschformate in Ihren Projekten.

1 Std. 34 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!