Es war mal eine Textdatei. Da haben unterschiedliche Leute etwas reingeschrieben, z.B. Kochrezepte. Da Textdateien nicht strukturiert sind, wurde es immer schwieriger, in der Datei etwas zu finden (ok, von der Benutzung von Strg+F mal abgesehen). Da entstand die Idee aus der Textdatei eine HTML-Datei zu machen und mit einer Suche zu versehen, die sucht während man tippt. Am besten sollten die Inhalte immernoch für alle pflegbar sein und trotzdem strukturiert.

Ich hab rausgefunden, dann man in HTML auch auf XML-Daten zurückgreifen kann, wenn man sie per JavaScript lädt. Zunächst erstellt man eine XML-Datei. Da legt man in dem Dokumentelement viele Knoten an, in denen jeweils Texte drinstehen. In diesem Fall heißen die Knoten entry und haben drei Unterknoten: title, desc (für description) und tags. Diese Datei speichert man als food.xml ab.

Dann erstellt man eine HTML-Datei. Diese hat erstmal das Grundgerüst, also head und body. In den Head kann man ein wenig Style-Eigenschaften einfügen. Im Body erstellt man ein Element mit der Id „page“ – da kommen dann die Ergenbisse rein und die Suchbox. Die Suchbox ist ein input-Feld, der Korrektheit halber packt man noch ein Form drumrum und fügt hinter das Eingabefeld ein Div ein, wo das getippte angezeigt wird (nur zur Kontrolle). Das Eingabefeld wird mit einem Event-Listener, nämlich on KeyUp versehen. Warum nicht onChange? Weil onChange erst ausgelöst wird, wenn man das Feld verläßt und wir wollen ja währenddessen suchen und onKeyUp meldet nach jeder Tasteneingabe. Die Suchbox hat eine Id (damit man darauf zugreifen kann) und von mir aus eine Klasse.

Was will man eigentlich durchsuchen? Die Daten stehen ja in der XML-Datei. Zunächst soll die Datei eingelesen und der Inhalt dargestellt werden. Beim Suchen werden die relevanten Teile ein- und ausgeblendet. Und um rauszufinden, welche Teile relevant sind, sollten die Inhalte vorher indiziert werden. Also: einlesen, darstellen, indizieren.

Das Einlesen sollte beim Aufruf der Seite stattfinden, also im body onLoad. Da wird die Funktion importXML aufgerufen. Nach einigem Suchen habe ich ein Skript gefunden, das meinen Vorstellungen entspricht und die XML-Datei „importiert“ abhängig vom Browser. Wenn der Import beendet ist, werden die Inhalte dargestellt. Dazu holt man sich alle Elemente mit dem Tag entry. Den Inhalt von title fügt man in ein h1 ein, den Inhalt in ein p, aber erst nachdem man alle Zeilenumbrüche in br umgewandelt hat. Und die Tags kommen in eine Liste.

Wenn man mit dem Darstellen fertig ist, dann muss nur noch indiziert werden. Dazu läuft man alle entry-Elemente wieder durch und speichert die Daten in einem assoziativen Array. Die Indizes sind die Id des div-Elementes, in dem der Inhalt drin steht.

Die Funktion search ist daher ganz einfach: man läuft das assoziative Array ab und erfragt die Position des gesuchten Begriffes. Falls der Begriff vorkommt, setzt man die Sichtbarkeit des dazugehörigen div-Elementes auf true, ansonsten auf false (oder in diesem Fall display auf block bzw. none).

Zu beachten ist: es sollten keine Umlaute verwendet werden, weil dann der IE die Datei nicht lädt und nur meldet „Object erwartet“ (die Fehlermeldung, die nur vor Aussagekraft strotz) und die Tags sollten richtig verschachtelt werden.

Und hier das Ergebnis:
XML-Datei als Vorlage
Suche mit JavaScript

PS: Vielen Dank an Maryna Hetsyuk für die wertvolle Hilfe, ist immer wieder sehr lustig 🙂