Erik Pöhler

Nachdem ich nun mein eigenes, erstes LightPress-Template zu weiten Teilen fertiggestellt habe, ist es fast schonmal an der Zeit ein paar Infos dazu niederzuschreiben. Oww, an den Internet Explorer braucht man mich nicht zu erinnern - mir ist klar, dass da noch einiges im argen liegt. Da es hier aber nun ganz frisch eine Live-Suche gibt, ein paar Infos dazu:

Was ist eine Live-Suche?

Zum besseren Verständnis: für all diejenigen, die den Weg auf diese Webseite auch ohne aktiviertem Javascript gefunden haben ;), gar nicht wußten, dass man Javascript auch deaktivieren oder aktivieren kann, oder nicht wissen, ob in Ihrem Browser Javascript nun ein- oder abgeschaltet ist: hier mal ein animierter Screenshot zur Verdeutlichung. Einfach mal ein paar Buchstaben ins Suchfeld tippen und warten, geht natürlich auch.
Kurz gefasst: eine Live-Suche ermöglicht es die Inhalte einer Webseite zu durchsuchen, ohne dass man die aktuelle Seite verlassen muss (um sich die Suchtreffer zB. auf einer Suchergebnis-Seite anzusehen, zu durchstöbern, oder herauszufinden dass nix gefunden wurde). Der Suchende hat also den Vorteil, schon beim Tippen zu erfahren ob sein Suchbegriff ihn auch zum erwarteten Ziel führt bzw. ob er hier überhaupt findet was ihn interessiert.
Sofern es Treffer gibt, kann man also einfach den Suchbegriff verfeinern oder einen passenderen oder spezifischeren Suchbegriff(e) wählen und bekommt schon beim Tippen bescheid. Noch etwas einfacher gesagt: Mit einer Live-Suche erspart man dem Suchenden, für einen Satz wie “Keine Ergebnisse für Begriff XY” extra auf eine neue Seite zu wechseln. Der “Zurück”-Button ist zwar der am häufigsten verwendete Button in Browsern und sicherlich findet jeder wieder dorthin zurück, wo er seine Suche begann, dieser Umweg ist aber schlicht überflüssig. Aktiviertes Javascript immer voraugesetzt - alle, die heutzutage ohne JS im Internet unterwegs sind, dürften das “Hilfe, mein Internet ist kaputt!”-Gefühl ja schon kennen :D …

Zutaten und Dankeschöns

Ein Dankeschön an die zahlreichen Tutorialschreiber die sich dem Thema schon gewidmet haben - da es wohl bereits mehr als genügend davon gibt, und ich mich hier auch gern um die Verwendung von Buzzwords und Schlagworten, dieser angeblich ach so brandneuen Technik, drücken will, bleibts hier auch bei einem “Danke” und ich bewahre die Welt vor einem weiteren A§%X-Tutorial, welches kein Mensch braucht.
Nur ein paar Infos, zu meiner Umsetzung: Die Live-Suche besteht aus einem Javascript- (Clientseitig) und einem PHP- (also der Serverseitigen Suche in der Datenbank) Teil. Der Javascript-Teil basiert hauptsächlich auf dem von Bitflux.ch in deren Wiki ausgiebig dokumentiertem Javascript. Eine minimale Anpassung wurde nötig um deutsche Umlaute korrekt zu übergeben:
in Zeile 136 hab ich anstatt
document.forms.searchform.q.value nun
EncodeURIComponent(document.forms.searchform.q.value) stehen.
Das stellt sicher, dass der Suchbegriff auch mit Umlauten noch korrekt übergeben wird. [für Firefox und sämtliche anderen modernen Browser stellt ein Umlaut, auch ohne diesen extrig zu escapen, kein Problem dar. Wie sollte es auch anders sein, ist der Internet Explorer der Einzige UA, der hier diese Extrawurst erforderlich macht…]
Anders als im Live-Suche-Tutorial von orderedlist.com, welches auf die Verwendung mit WordPress zugeschnitten ist, verwende ich eine eigenständige Datei für die Datenbankabfrage, für die es z.B. hier ein exemplarisches Muster gibt. An dieser Stelle auch Danke an Aidan Lister, der eine kompakte String-Highlighter-Funktion veröffentlicht hat. Ideal für so eine Suche, da case-insensitive (unabhängig von Groß- oder Kleinschreibung), html-Element kompatibel und obendrein leicht anzupassen.
Ein weiteres mini-PHP-Skript hab ich noch hinzugefügt, damit die Seite, die nach dem abschicken des Formulars erscheint eine schöne, lesbare URL erhält. Diese Ergebnisseite liefert dann alle Suchergebnisse, statt nur den platzsparenden, maximal 10 Ergebnissen die die Live-Suche in der Seitenleiste liefert. Das kleine Skript entfernt lediglich Sonderzeichen, ersetzt diese mit einem Pluszeichen, entfernt überflüssige Pluszeichen und prüft dann nochmal den Suchbegriff. Was jedem Programmierer einleuchtet, empfinde ich aus Usability-Sicht eher als Nachteil: URLs werden im Browser spätestens nach dem Aufruf auf den größten gemeinsamen Nenner “UTF-8” umgeschrieben, es können also keine deutschen Umlaute dargestellt werden. Schade eigentlich. Die kryptischen Zeichenketten, die man stattdessen sieht, mit ihren vielen Prozentzeichen sind inkonsequent und unschön (da bemüht man sich um Parameter-freie URLs und dann macht plötzlich der Browser nicht mit… naja) - vermeiden oder umgehen lässt sich das nicht.
Die hübschen Einblendeffekte (ebenfalls Javascript), sind mit der Kombination von Prototype lite (die nur wenige Kilobyte große Lite-Version von Prototype gibt es ebenfalls auf den moo.fx-Projektseiten zum Download) und moo.fx realisiert. Alles in allem: allein durch zurückgreifen auf pre-made, also fertige, Skripte und ein bißchen Optimierung lässt sich die Handhabung einer Seite für den Besucher erheblich verbessern. *mir auf die Schulter klopf* haah - jetzt bin ich in diesem Artikel sogar ohne klingende Schlagworte ausgekommen :)

Ein bißchen darf ich noch dran schrauben, denn was noch fehlt ist der obligatorische Indikator, der dem Besucher bei Tastendruck signalisiert, dass etwas passiert.

Schlagworte: AJAX, Code, Javascript, Live-Suche, PHP

Dieser Beitrag wurde vor am Samstag, 15. Juli 2006 um 5:12 pm Uhr veröffentlicht und unter Webwork gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.