Autovervollständigung von <INPUT>-Feldern mit Javascript

[Verona]

Hallo liebes Forum,

ich suche eine Möglichkeit die Texteingabe in Formularfeldern automatisch zu vervollständigen. Ich denke da an sowas wie z.B. die Benutzer.dic in Word.

Kennt jemand vielleicht ein Script, das ähnliches schon bietet? Ich habe leider keins gefunden und bei den Suchmaschinen findet man nur was zum Thema Autovervollständigung der URL in der Adressleiste oder Speichern von Benutzernamen und Kennwörtern mit dem IE. Aber vielleicht hat ja jemand von euch damit was getrickst. Denke mir mal, das das wohl am einfachsten wäre.

Wie könnte man denn sowas mit Javascript realisieren? Mal zu den Randbedingungen. WAMP als Intranet. Und die Felder die automatisch vervollständigt werden sollten sind <input type="text" ...

Für Tipps und Infos bin ich wie immer sehr dankbar.

[Robert Bamler]

Hallo Verona,

mir ist noch nicht ganz klar geworden, mit was die Eingabe "aufgefüllt" werden soll und was das Benutzerwörterbuch von Word damit zu tun hat. Wenn ich das Richtig verstanden habe, ist die Benutzer.dic nur eine Erweiterung zum von Microsoft bereitgestellten Wörterbuch, in dem man oft verwendete Wörter speichern kann, damit sie Word nicht als Fehler ankreidet.

Aber ich schätze mal, du hast irgendwie eine Liste von Strings vorliegen, die mit hoher Wahrscheinlichkeit in das input-Feld eingegeben werden. Dann würde ich diese Strings einfach in einem Array ablegen:

wahrscheinlicheEingaben = new Array(
  "Eingabe 1",
  "Eingabe 2",
  "Eingabe 3"
);

Falls diese erwarteten Eingaben vom jeweiligen Benutzer abhängig sind, kannst du so ein Array ja auch relativ einfach serverseitig erstellen lassen. Du solltest aber die Anzahl der zu erwartenden Eingaben auf ein Maximum beschränken, damit keine allzu großen Seiten übertragen werden müssen. Am besten ordnest du die Einträge des Arrays auch nach dem Datum, an dem die jeweilige Eingabe zuletzt entgegengenommen wurde. Soll heißen, dass oben erst kürzlich gemachte Eingaben stehen, die folglich auch jetzt eher zu erwarten sind. Erst weiter unten kommen dann die älteren Eingaben.

Dann kannst du über den onchange-Eventhandler im input-Feld eine Funktion aufrufen, welche die Länge des eingegebenen Strings ausliest und in einer Variablen eingabeLaenge speichert. Anschließend geht diese Funktion in einer Schleife das Array wahrscheinlicheEingaben durch und überprüft je Eintrag, ob die Länge des Strings des jeweiligen Eintrags größer oder gleich groß ist wie eingabeLaenge. Ist das der Fall, so werden die ersten eingabeLaenge Zeichen des aktuellen Eintrags des Arrays mit der Eingabe im Textfeld verglichen. Sind sie gleich (evtl. wird Groß-/Kleinschreibung ignoriert), so bricht die Schleife ab und der gefundene String wird als Vorschlag ausgegeben.

Du musst dir nur noch überlegen, *wie* du diesen Vorschlag ausgibst. Teilweises Markieren des Textes in einem input-Feld geht glaube ich mit JavaScript nicht. Du könntest aber beispielsweise unter dem Input-Feld eine Auswahlliste anzeigen, in der zuerst alle zu erwartenden Einträge angezeigt werden und nach der Eingabe eines Zeichens im input-Feld nur noch die Einträge, die mit dem/den eingegebenen Zeichen anfangen. Allerdings sollte das nicht den Eindruck erwecken, dass nur die vorgeschlagenen Eingaben möglich sind. Man kann ja auch irgend etwas anderes eingeben, wenn ich dich richtig verstanden habe.

Viel Erfolg,
Robert

[verona]

Danke Robert,

noch kurz zu Erklärung. Es geht z.B. um immer wiederkehrende Eingaben in diesen Formularfeldern. Nehmen wir mal an, es sind immer die Städte Berlin, Bonn, Potsdam, Dresden, Köln, München usw. Wenn der Benutzer jetzt den ersten Buchstaben eingibt - ein 'M' - , dann soll sofort der Rest 'ünchen' erscheinen. Tippt er ein 'B' erhält er zunächst 'Berlin', weil der zweite Buchstabe weiter vorne Alphabet  steht. Erst wenn er den zweiten Buchstaben tippt, hier das 'o', dann erscheint Bonn, wenn es in diesem Benutzer.dic? nicht noch ein Bocholt gibt.

[Severin]

Hallo,

stellst du dir das etwa so vor:
namen = new Array("Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag");
function test(text){
   for(i=0;i<7;i++){
   var texty = text.substring(0,2).toLowerCase();
   var namy = namen[i].substring(0,2).toLowerCase();
   if(texty == namy){
  document.getElementById("hugo").value =namen[i];
    }
   }
 }

<input type="TEXT" onKeyUp="test(this.value)" id="hugo" >

ich hatte das mal für einen freund gemacht, ich glaube du könntest es leicht modifizieren.

gruß,
Severin

[Verona]

Hallo Severin,

ja genau das habe ich gesucht. Problem hierbei ist, dass das erst ab dem zweiten Buchstaben geht, und es deinem Script im Prinzip egal ist, ob es mehr Möglichkeiten gibt.

Z.B. Mailand, Mainz!

Also selbst wenn ich drei Buchstaben eingebe; M A I, kann ich niemals Mailand kriegen. Ich muss mir jetzt noch was basteln, dass die Anzahl der für eine eindeutige Indentifizierung nötigen Buchstaben quasi dynamisch (bei Eingabe) ermittelt. Aber der Ansatz ist echt spitze. Hat mir sehr weitergeholfen.

Danke V.