nicht angemeldet
Vervollständigen eines Textfeldes mit Auswahl
Hallo,
möchte folgendes programmieren:
In einem Textfeld gebe ich einen Artikel ein, z.B. Schuhe. Das Textfeld soll nun die in der Datenbank vorhandenen Artikel mit dem Stichwort vergleichen und automatisch vervollständigen (z.B. wenn ich Sc eingebe, vervollständigt das Skript auf Schuhe und markiert das "huhe"). Das funktioniert auch schon mit folgendem Skript:
function autocomplete()
{
tempname = document.form1.suche.value.toLowerCase();
for(i=0; i<woerterbuch.length; i++) {
if(woerterbuch[i].toLowerCase().indexOf(tempname) == 0 && tempname.length != woerterbuch[i].length) {
document.form1.suche.value = woerterbuch[i];
(range = document.form1.suche.createTextRange()).moveStart('character',tempname.length);
range.select();
break;
}
}
}
was ich jetzt noch gerne hätte, wäre eine Funktion wie sie z.B. Facebook oder auch die Google-Toolbar hat: Man gibt den Suchbegriff ein und es wird nicht automatisch vervollständigt, sondern unter dem Textfeld werden die passenden Treffer angezeigt, die man dann mittels Maus auswählen kann. Z.B. gebe ich "Schu" ein und sozusagen als Dropdown soll angezeigt werden: "Schuhe Nike" "Schuhe Adidas" und im Idealfall sogar Elemente wo "Schuhe" nicht am Wortanfang kommen wie "Sportschuhe".
Wie kann ich das machen? Soll ich ein Layer dafür verwenden? Oder ein Dropdownmenü - hab allerdings keine Möglichkeit gefunden, wie man dort einen Suchbegriff eingeben könnte?
Kleine Info noch: Meine Artikel werden aus einer sql-DB ausgelesen und in einem JS-Array zwischengespeichert (woerterbuch). Ist vermutlich nicht sehr elegant, oder? Wäre vielleicht AJAX hier angebracht? Falls ja, wie müsste ich das machen?
Danke an alle
-
Hallo,
da bist du mit AJAX am Besten aufgehoben.
Dieser Link zu einer Sammlung von AJAX - Live Search Tutorials und Hilfen sollte dir helfen.
Grüße
-
Mahlzeit,
Wie kann ich das machen? Soll ich ein Layer dafür verwenden? Oder ein Dropdownmenü - hab allerdings keine Möglichkeit gefunden, wie man dort einen Suchbegriff eingeben könnte?
Ich habe mal sowas gebastelt - wenn ich das wiederfinde und etwas "anhübsche", könnte ich es mal zur Verfügung stellen.
Grob gesagt die Funktionsweise: du fängst die Tastendrücke innerhalb des <input> ab, machst ggf. im Hintergrund eine AJAX-Abfrage gegen Deine Datenbank und präsentierst, falls Ergebnisse zurückkommen, diese in einer <ul> innerhalb eines <div> "unterhalb", allerdings vom z-index her "oberhalb" deines <input>. Dann noch hier und da ein bisschen layouten und designen - et voilá, fertig ist die <select>-Box mit Suchbegriffseingabe.
Kleine Info noch: Meine Artikel werden aus einer sql-DB ausgelesen und in einem JS-Array zwischengespeichert (woerterbuch). Ist vermutlich nicht sehr elegant, oder?
Naja ... für kleinere Datenmengen und wenn es nicht kritisch ist, dass so im Prinzip jeder alle Deine Daten auslesen kann, ist das doch OK - solange es performant ist!
Wäre vielleicht AJAX hier angebracht? Falls ja, wie müsste ich das machen?
Angebracht: weiß ich nicht, musst Du entscheiden. Im Prinzip ist AJAX nichts anderes als ein HTTP-Request auf eine Ressource, der Du natürlich mittels GET oder POST Informationen übergeben kannst und die Dir irgendwelche Ergebnisse zurückliefert. Wenn Du diese dann mit Javascript ausliest und verarbeitest, kannst Du sie natürlich anschließend irgendwo im DOM unterbringen.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:| -
Hallo,
das habe ich vor ein paar tagen mit Xajax und Yui gebaut.
Da ich jetzt zu faul bin, dazu eine Anleitung zu schreiben, poste ich mal diese: http://community.xajaxproject.org/viewtopic.php?id=6115(Oder Du schaust in den SC meiner Seite...)
Gruß,
Manu