Site-Suche II

Vor einiger Zeit habe ich mittels Skript von Webdesign Weisshart eine Suchfunktion für meine Homepage implementiert.

Das klappt wunderbar, die Suchbegriffe werden erwartungsgemäß gefunden und farblich hinterlegt auf den Zielseiten hervorgehoben.

Das Sahnehäubchen wäre, wenn zumindest die erste Fundstelle auf einer nach der Suche geöffneten Zielseite direkt in den sichtbaren Bereich geholt würde, denn meine Texte sind nicht die Kürzesten, wie der geneigte Leser bereits gemerkt haben dürfte.

Fritz Weisshart hat diese Funktionalität in seinen eigenen Skripten natürlich realisiert, ist aber leider nicht bereit, den passenden Code für die Freeware Version für private Anwender seines Suchskripts anzubieten.

Aus dem Wunsch heraus, diese Funktionalität auch meinen Besuchern zur Verfügung zu stellen, habe ich die Stelle in den Sourcen der Suchskripte gesucht, wo die Suchbegriffe fertig getaggt, also farblich hervorgehoben sind.

Direkt danach kommt folgender Javascript Codeschnipsel zum Einsatz:

Als Ergebnis einer Suche werden die Suchworte auf der Zielseite vom Skript behandelt, damit die CSS Formatierung die Worte findet. Sie werden in die Klasse “searchwordX” eingebettet, wobei X eine Zahl von 0 (Null) aufsteigend ist, abhängig von der Anzahl eingegebener Suchworte. Zusätzlich wird die Stelle in das Element em eingebettet. Mein Codeschnipsel ignoriert das umschließende Element em und sucht per Wildcardsuche nach der Klasse searchword, die anhängende Zahl ignorierend.

Im Inspektor von Firefox sieht eine Fundstelle nach der Suche nach “ahorn” so aus:

Sucht man nach mehreren Begriffen, also z.B. nach “ahorn microwood” ergibt sich folgendes Bild im Firefox Inspektor:

Man sieht, die Reihenfolge der Suchworte bei der Eingabe spiegelt sich in der Zuordnung der Nummerierung hinter searchword. Die 1 im Beispiel erscheint oberhalb der 0 des zuerst eingegebenen Suchbegriffs.

Mein Quick&Dirty Hack zeigt immer nur die erste Fundstelle an, unabhängig davon, ob das Suchwort ggf. erst das zweite Wort in der Suche war. Genauso fehlt eine Funktion, die bei mehreren Treffern auf einer Seite zwischen den Fundstellen wechseln kann (“Zeige nächste/vorherige Fundstelle”).

Da der Aufruf der Funktion Highlight() aus einem Binary Blob heraus erfolgt, konnte ich meinen Hack nicht an die richtige Stelle, hinter das Return von Highlight() setzen, sondern ich habe den Codeschnipsel in die Funktion noshowWait() eingebaut, die direkt nach Einfärben der Suchworte aufgerufen wird.

Funktioniert soweit, ich bin zufrieden :)

Aktualisierung
Die oben beschriebenen Nachteile haben mir keine Ruhe gelassen, ich habe also noch ein bisschen weiter geforscht und die Funktion “Springe zur ersten Fundstelle” aufgebohrt. Bei der Erweiterung habe ich mir von einer KI helfen lassen, auf mich alleine gestellt wäre nichts daraus geworden.

Nach erfolgter Suche erscheint jetzt dynamisch ein kleines Menü rechts oben auf der Seite, mit dem die Fundstellen auf der aktuellen Seite sequentiell angesprungen werden können.

Die Erweiterung ist in der Datei “wdw_suche.js” eingebaut und blendet automatisch auf jeder Seite das Menü auf, wenn in der URL der Query Operator  “...?q=” vorhanden ist.

Mit Click auf “Markierungen löschen” werden die Hervorhebungen auf der Seite und der Query Operator in der URL entfernt, die Seite reagiert wieder wie ohne Suche gewohnt (F5 lädt die Seite einfach neu, ohne wieder die erste Fundstelle anzuspringen. Das hat mich bisher sehr irritiert und letztlich ausreichend genervt, um auf Abhilfe zu sinnen).

Im Original von Fritz Weisshart ist die eigentliche Suchfunktionalität in einem Binary-Blob verkapselt, so dass ich keinen direkten Zugang zu der Stelle im Code habe, wo die Navigation innerhalb der Fundstellen eingehängt werden müsste. Allerdings existiert in der Datei “wdw_suche.js” die Funktion “noshowWait()”, die den Throbber, das Ich-bin-Beschäftigt-Zeichen der Suchfunktion, nach der Markierung der Fundstellen wieder abschaltet.

Diese Funktion nutze ich als Einhängepunkt und ändere sie folgendermaßen:

Aus

wird

Der eigentliche Code für die Navigation innerhalb der Suchergebnisse ist in eine eigene Datei “search-nav.js” ausgelagert. In JavaSkript muss man ein bisschen tricksen um ein “include” zu realisieren. Dazu muss am Beginn der Datei “wdw_suche.js” folgender Code eingefügt werden:

Das Menü für die Navigation innerhalb der Suchergebnisse hat noch einen Minimize-Button erhalten, damit es z.B. auf dem Handy verkleinert werden kann.

Mit diesen Erweiterungen kann jetzt nach einer erfolgreichen Suche innerhalb der Zielseite von Fundstelle zu Fundstelle navigiert werden. Werden die Markierungen über das Navigationsmenü  gelöscht, bleibt der Fokus innerhalb der Seite auf der aktuellen Position, die Seite wird nicht neu geladen.