Eine vernünftig funktionierende und intuitive Speed-Typing-Funktion für so ein Suchfeld lässt sich nicht wirklich gut aus Standard-HTML-Elementen mit wenig Javascript zusammenbauen.
Such dir ein Javascript-Toolkit (z.B. jQuery, Mootools) oder schreib das ganze gleich mit Java (und exportiere es mit dem Google Web Toolkit nach Javascript).
Dann kannst du auch das Interface gleich gescheit zusammenbauen und das ganze Event-Management läuft mit so einem Toolkit doch bedeutend einfacher.
Das einzig schwierige am Speed-Typing ist es, die Liste der vorgeschlagenen Wörter zu generieren.
Am besten erzeugst du aus deinem zu durchsuchenden Content ein Wörterbuch (sortiert nach oft vorkommenden Wörtern). Wenn du nicht zu viel Content hast, reicht es, bei einer Änderung im Suchfeld (am besten mit einer kleinen Latenz, damit du beim Tippen nicht mehrere Suchen auslöst) per AJAX den Suchbegriff auf den Server schickst, ihn dort mit dem Wörterbuch matchst (z.B. Substring), und die10 besten Ergebnisse zurücklieferst. Natürlich solltest du dir ein gutes Ranking-Verfahren überlegen, damit du nicht nur Schrott in den Vorschlägen stehen hast.
Das Interface auf der Client-Seite sollte sich nur aufklappen, wenn es Suchvorschläge gibt, und sollte sich auch so verhalten, wie eine aufgeklappte Comco-Box. D.h.: Navigation mit Pfeiltasten in der Suchliste, Auswählen von Vorschlägen mit Enter oder Mausklick (und dabei evtl. schon Abschicken der Maske). Die Liste sollte auch verschwinden, wenn man irgendwo sonst auf die Maske klickt, etc.
Wie gesagt, das schwierigste dürfte das generieren der Ergebnisse sein, da diese sehr schnell zurückgeliefert werden müssen (Benutzer sind bei sowas ungeduldig).
mfg, metax. |