Suche innerhalb der Website

Wenn die Webpräsentation umfangreicher wird, wachsen die Probleme, dem Nutzer alles, was man Tolles anzubieten hat, auch mundgerecht zu servieren.
Was kann man tun? Richtig, übersichtliche Navigation und evtl. auch eine Suchhilfe anbieten. Dabei gibt es mehrere Möglichkeiten.
1. Man kann eine Übersicht der Stichworte in einem Auswahlfeld anbieten. Das sieht auf den ersten Blick weniger professionell aus, als eine "richtige" Suchmaschine, hat aber einen wichtigen Vorteil: Der Nutzer muß sein Suchwort nicht selber schreiben; es gibt keine Probleme mit Synonymen oder mit Schreibfehlern. Eigentlich handelt es sich hier lediglich um ein spezielles Pulldownmenü.
2. Professioneller und problematischer in der Bedienung ist die Suchmaschine. Wenn die Auswahl-Variante einmal realisiert ist, ist es zur Suchmaschine, die innerhalb eines Kataloges sucht, nur ein kleiner Schritt. Diese Suche erfolgt blitzschnell. Da das Ziel immer nur ein Link innerhalb der Site ist, kann man auf die Verknüpfbarkeit von Suchbegriffen verzichten.
Die Varianten 1 und 2 haben den häßlichen Nachteil, daß der Stichwortkatalog "von Hand" angelegt und gepflegt werden muß. (Nicht ganz richtig, man kann sich natürlich einer programmierten Hilfe bedienen, die dann auch noch so wichtige Suchbegriffe wie "und" katalogisiert.)
3. Wer es langsamer aber weniger arbeitsintensiv wünscht, muß eine "richtige" Suchmaschine bauen, die Seite für Seite der Präsentation erst mal laden und durchsuchen muß. Das kann dauern, deshalb wird man diese Art Suchmaschine wohl in der Regel doch lieber serverseitig betreiben, weil dort der Zugriff blitzartig erfolgt.

Suchhilfe mit Auswahlfeld

Gehen wir schrittweise vor:
1. Schritt: Anlegen der Auswahlliste
Ein Auswahlfeld muß mit Angeboten versehen werden. Einfachste Möglichkeit wäre, dies in HTML-Code zu machen. Aber doch nicht mit uns! Mit JavaScript wird man die Daten in ein Array packen, welches mit der Seite, die die Auswahlmöglichkeit anbietet, geladen wird. Im einfachsten Falle legt man dieses Array von Hand an. Wo es dann steht, ist Geschmackssache, auf der Seite selbst oder in einer zuzuladenden *.js-Datei.
Soweit kein Problem. Machen wir uns eines: Der Text würde im ersten Anlauf etwa lauten:

var begriffe = new Array(1000); var zeile = new Array(1000); begriffe[1]="Aachen"; zeile[1]="seitea.htm#aach"; begriffe[2]="Birnbaum"; zeile[2]="seiteb.htm#birne"; ... begriffe[999]="Zausel"; zeile[999]="seitez.htm#zaus";

Okay, leider wollen wir nachträglich noch "Auto" einordnen. Im Interesse der geordneten Anzeige gleich hinter Aachen. Also ändern wir 2 mal "alle - 1" Nummern. Ne Du, das glaub' ich jetzt nicht. Mal sehen, ob es einfacher geht.

var begriffe = new Array("Aachen seitea.htm#aach","Birnbaum seiteb.htm#birne",...,"Zausel seitez.htm#zaus");

Bedenken wegen der Länge dieser Zeile muß man nicht haben.
Es erheben sich zwei Fragen.
1. Wie geht es weiter? Dazu später
2. Wie, wenn uns das noch zu umständlich ist? Müssen wir dies Array wirklich selber sortieren? Wenn wir das Array etwa doch erst aus den Seiten zusammenstellen? Wer sortiert dann? JavaScript natürlich, denn es kennt eine Array-Funktionsort(), die ohne weitere Angabe nach den Zeichencodes sortiert, hier also Substantive und Verben getrennt. Mit ihrer Hilfe könnten wir die Begriffs-Quellenpaare in beliebiger Reihenfolge vorgeben.

2. Schritt: Auswahlfeld anlegen
Der Code dazu:

<form name="suche"> <select name="angebot" onChange="lade()"> <script language=javascript> document.write("\

Dies läßt sich noch weiter vereinfachen, denn die Hilfsvariablen wort und wohin sind entbehrlich; allerdings wird dann der write-Eintrag etwas unübersichtlich.

3. Schritt: Ladefunktion
Was jetzt noch fehlt, ist die Funktion lade(), die die Auswertung unserer Auswahl und das Laden der gewünschten Seite/Stelle erledigt. Sie kann im Head-Teil der Seite stehen und könnte hier (wie im entsprechenden Menue-Beispiel) etwa so aussehen:

function lade() { nummer=window.document.suche.angebot.selectedIndex; if(nummer>0) { seite=window.document.suche.angebot.options[nummer].value; self.location.href=seite; } }

4. Schritt: Sich freuen, weil es klappt!

Allerdings werden Sie bei der Wahl Fehlermeldungen erhalten. Meine Ziele existieren ja nicht wirklich!

Suche anhand einer Stichwortliste

Die Anlage und Verwaltung der Liste verläuft, wie oben beschrieben. Es folgt sogleich ein

Schritt 2: Frageformular
Das Formular enthält typischerweise ein Textfeld für die Eingabe eines Suchwortes.

So sieht der Code aus. Nichts besonderes, wichtig nur der Aufruf der Funktion zeig(), die die gefundene Seite bzw. durch Marke gekenzeichnte Stelle lädt.

<form name="maschine"> Suchtext: <input name="ein" type="text" size="20" value=""> <input type="button" value="Fertig" onClick="zeig()"> </form>

Schritt 3: Auswertungsfunktion
Das Suchwort muß nun mit dem Angebot an Stichworten verglichen werden.
Damit die Suche erfolgreich sein kann, müssen Suchwort und Listeneinträge praktischerweise beide in Kleinbuchstaben umgewandelt werden. Übrigens, was ich hier erst mal weglasse, sind Probleme wie Umlaute, Synonyme, die man berücksichtigen könnte etc. Wer es hübscher will, kann hier noch viel tun.

function zeig() { for(i=0;i<=begriffe.length-1;i++) { such=window.document.maschine.ein.value.toLowerCase(); wort=begriffe[i].slice(0,begriffe[i].indexOf(" ")).toLowerCase(); if(wort==such)self.location.href=begriffe[i].slice(begriffe[i].indexOf(" ")+1,begriffe[i].length); } }

Auch hier werden, im Falle eines Treffers, Seiten angesprungen, die nicht existieren!

Dieses Tutorial wurde bereitgestellt von Prof. Dr. Rolf Hirte, Technische Fachhochschule Wildau. Vielen Dank an dieser Stelle!
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.
Solltet ihr ein nützliches Script entwerfen, von dem ihr meint dass es gut auf diese Seite passen würde, dann sendet es doch einfach ein :-)

Suche innerhalb der Website

Suchhilfe mit Auswahlfeld

Suche anhand einer Stichwortliste

Login