mister xy: Vervollständigen eines Textfeldes mit Auswahl

Beitrag lesen

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