Hallo und herzlich Willkommen zu einem weiteren Tutorial.
In diesem Tutorial wollen wir zusammen ein “Suggestion-Script” schreiben. Ein Script welches also Vorschläge (engl. suggestions) macht. Kennen sollte das jeder, da die Suchmaschine Google nämlich genau so eine Funktion eingebaut hat. Gibt man in einem Textfeld einen Teil eines Wortes ein, erscheint sofort das Wort oder Wörter die gleich beginnen. Dies ist sehr nützlich und macht es so für den User einfacher zu suchen.

Voraussetzungen:

• Basis HTML & CSS Kenntnisse
• Basis Javascript Kenntnisse

Lernziele:

• Javascript Funktionen mit Parameter
• Verwenden von for Schleifen
• Verwenden der substring Funktion

Vorschau

Das Javascript sieht eigentlich ziemlich simpel aus:


wlist = new Array();
wlist = ["hocker","hurra","hello kitty","hugo","bobby"];
function suggestion(txt) {
if(txt == "" || txt == null || !txt) {
document.getElementById('white').style.display = "none";
document.getElementById('white').innerHTML = "";
return 0;
} else {
document.getElementById('white').innerHTML = "";
for(i=0;i < wlist.length; i++) {
clen = txt.length;
ctxt = wlist[i].substring(0,clen);
if(ctxt == txt) {
document.getElementById('white').style.display = "block";
document.getElementById('white').innerHTML = document.getElementById('white').innerHTML + wlist[i] + "
";
}
}
}
}


Zuerst erstellen wir einen neuen Array und füllen diesen anschliessend mit Werten. In dem Array können so gut wie unendlich viele Begriffe stehen, jedoch empfiehlt es sich, es damit nicht zu übertreiben da dann das Script langsam werden könnte.

Danach haben wir die eigentliche Funktion. function suggestion(txt) das “txt” in den Klammern bedeutet dass alles was der Funktion als Parameter so übergeben wird, für die Funktion in der Variable “txt” gespeichert wird. Nun können wir auch schon mit der Auswertung beginnen. Man such dabei in Erinnerung behalten, dass wir später immer das was aktuell gerade im Textfeld steht übergeben werden.

Mit einer if-Abfrage überprüfen wir zuerst ob überhaupt etwas übergeben wurde, also ob überhaupt etwas im Textfeld steht.

if(txt == “” || txt == null || !txt) bedeutet nichts anderes wie das. Die || stehen für “oder”. Dies braucht es, da wie immer nicht alle Browser alles unterstützen. Nun greifen wir auf unseren Div-Container zu. Wir werden ihm später den Namen “white” geben, darum rufen wir ihn mit folgendem Code auf, verstecken ihn an und löschen seinen Inhalt, wir erinnern uns: Dieser Code wird nur ausgeführt wenn das Textfeld leer ist.

document.getElementById(‘white’).style.display = “none”;
document.getElementById(‘white’).innerHTML = “”;

Schlussendlich geben wir noch 0 zurück mit return 0. Dies macht nichts anderes wie die Funktion zu beenden.

Dann kommt der else Teil der Abfrage, wenn das Textfeld also nicht leer ist machen wir folgendes:
Wir löschen wieder den Inhalt des Containers und dann kommt der wichtige Teil, wir starten eine for-Schleife die solange läuft wie es Elemente in dem Array mit den Wörtern hat.

for(i=0;i < wlist.length; i++)

Der erste Teil ist dabei die Bedingung die erfüllt werden muss, damit die Schleife gestartet wird, i brauchen wir hier als Zählvariable, existiert diese nicht wird sie automatisch erstellt. Danach kommt die Bedingung unter der die Schleife laufen soll, also solange i kleiner ist wie die Anzahl Wörter in der Liste. Nun kommt der letzte Teil, hier wird nur unsere Zählvariable i jedesmal wenn die Schleife von vorne durchgelaufen wird um 1 erhöht. Enthält die Wörterliste also 23 Wörter, wird die Schleife 23 mal durchlaufen.

Nun können wir mit dem “Herz” des Scripts beginnen:

clen = txt.length;
ctxt = wlist[i].substring(0,clen);

Wir speichern zuerst die Länge des Texts in dem Textfeld (der ja per Parameter übergeben wurde) in einer Variable. Danach machen wir von der substring Funktion gebraucht. Zur Information, die substring Funktion kürzt bzw. teilt einen String, in diesem Fall unser Wort und gibt anschliessend das “rausgeschnittene” Stück aus. Wir holen also ein Wort aus der Wortliste, in dem wir auf den Array zugreifen und mit Hilfe der Zählvariable i das Wort “auswählen”. Nun teilen wir das Wort ein. Der substring Funktion übergeben wir 2 Parameter. Der erste gibt an wo gestartet werden soll, da wir von Anfang an die beiden Werte (der Text im Textfeld und das Wort) vergleichen wollen, ist dieser Wert hier gleich 0. Danach kommt der Endpunkt. Dieser soll in unserem Fall natürlich genau so hoch sein wie die Anzahl Zeichen in dem Textfeld.

Ein kleines Erklärungsbeispiel:

Steht im Textfeld “Baum”, ist clen gleich 4, da das Wort “Baum” vier Zeichen erhält. Haben wir nun in unserer Wortliste irgendwo das Wort “Baumschule” wird es nun mit substring gekürzt und zwar vom 0ten bis zum 4ten Zeichen. Das heisst ctxt entspricht nun auch “Baum”. Wir haben einen Treffer und das ganze Wort “Baumschule” soll nun bei den Vorschlägen erscheinen.

Wie oben erwähnt prüfen wir zuerst mit einer einfachen if Abfrage ob die beiden Werte gleich sind und schreiben dann in den Div-Container:

document.getElementById(‘white’).style.display = “block”;
document.getElementById(‘white’).innerHTML = document.getElementById(‘white’).innerHTML + wlist[i] + “<br />”;

Zuerst müssen wir angeben, dass unser Container angezeigt werden soll, danach addieren wir quasi das Wort aus der Wortliste hinzu. Wenn wir eine einfache Zuweisung mit einem Gleichheitszeichen machen würden, würde das bedeuten, dass alle anderen Wörter immer wieder aus dem Div-Container gelösch werden würden, das wollen wir ja nicht.

So, unser Script ist nun eigentlich fertig.

Der Schönheit halber hier noch etwas CSS:


#white {
position: absolute;
top: 63px;
left: 12px;
width: 144px;
border: 1px solid silver;
background: #FFFFFF;
color: #CBCBCB;
font-family: "Verdana", "Arial", sans-serif;
display: none;
font-size: 12px;
z-index: 1;
padding: 3px;
}
#suggestion {
border: 1px solid silver;
font-family: "Verdana", "Arial", sans-serif;
font-size: 15px;
margin: 5px;
padding: 2px;
float: left;
width: 150px;
height: 30px;
clear: left;

}


Dabei ist eigentlich nichts Interessantes, ausser dass “z-index” auf 1 und “position” auf “absolute” stehen muss, damit die Vorschläge unabhängig von der Position des Textfeldes über dem Inhalt angezeigt werden.

Die Position der Vorschläge muss man natürlich ggf. anpassen.

Nun brauchen wir nur noch ein Textfeld, bei dem bei jeder Eingabe unsere Funktion aufgerufen wird:


Hier etwas eingeben, damit die Vorschläge erscheinen:

Hier weiterer Text... Lorem Ipsum Dolor und so.


Speziell ist hier folgendes:

onkeyup=”suggestion(this.value)”

Das bewirkt, dass jedesmal wenn das Textfeld angewählt ist und eine Tastatureingabe erfolgt (eine Taste losgelassen wird) unsere Funktion aufgerufen wird. Als Parameter wird “this.value” übergeben was nichts anderes wie die Zeichen in dem Textfeld bedeutet.

So, wir können das Script nun testen. Nun sollte man einen Buchstaben, in meinem Fall den Buchstaben “h” in das Textfeld eingeben können und es sollten Vorschläge erscheinen.

Vielen Dank für’s lesen und wie immer, Fragen und Kritik in die Comments.