Wie man Tastatur nach oben oder unten zwischen den dropdown auf "Optionen"?

Question

Ich habe ein custom built-ajax [div] - basierte dynamische dropdown.

Ich habe eine [input] - Feld, die; onkeyup, läuft eine Ajax-Suche liefert Ergebnisse in divs und sind zurück gezogen in die Verwendung von innerHTML.Diese divs haben alle highlights onmouseover also, eine typische erfolgreiche Suche ergibt sich die folgende Struktur (verzeihen Sie das semi-code):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

Es funktioniert.

Jedoch fehlt mir die wichtige Funktionen hinter den regulären HTML-Elementen.Ich kann keine Tastatur nach oben oder unten zwischen "Optionen".

Ich weiß, javascript behandelt Tastatur-Ereignisse, aber;Ich habe nicht in der Lage zu finden eine gute Anleitung.(Natürlich der follow-up-Frage wird am Ende sein:kann ich verwenden <ENTER> auslösen, die onclick Ereignis?)

Answer 1

Was Sie tun müssen, ist befestigen Sie Ereignis-Listener, um die div mit id="results".Sie können dies tun, indem Sie hinzufügen onkeyup, onkeydown, etc.Attribute, um die div wenn Sie Sie erstellen, oder Sie können befestigen Sie diese mit JavaScript.

Meine Empfehlung wäre, dass Sie eine AJAX-Bibliothek wie YUI, jQuery, Prototyp, etc.aus zwei Gründen:

1. Es klingt wie Sie versuchen, zu erstellen eine Auto-Vervollständigen Kontrolle ist etwas, das die meisten AJAX-libaries sollte.Wenn Sie können eine vorhandene Komponente, die Sie sparen sich eine Menge Zeit.
2. Selbst wenn Sie das nicht möchten, verwenden Sie die Steuerung, indem Sie eine Bibliothek aller Bibliotheken eine Veranstaltung Bibliotheken, die helfen Sie zu verstecken die Unterschiede zwischen den Ereignis-APIs, die von verschiedenen Browsern.

Vergessen addEvent, Yahoo!'s Event Utility bietet eine gute Zusammenfassung von dem, was ein Ereignis Bibliothek soll für Sie zur Verfügung stellen.Ich bin mir ziemlich sicher, dass das event-Bibliotheken von jQuery, Prototype, et.al.bieten ähnliche Funktionen.

Wenn, dass Artikel die über den Kopf geht, haben Sie einen Blick auf diese Dokumentation erste und dann re-Lesen Sie die original Artikel (ich fand den Artikel machte viel mehr Sinn, nachdem ich nutzte die Veranstaltung, - Bibliothek).

Ein paar andere Dinge:

• Mit JavaScript gibt Ihnen viel mehr Kontrolle als schreiben onkeyup etc.Attribute in den HTML-Code.Es sei denn, Sie möchten etwas zu tun wirklich einfach Ich würde JavaScript verwenden.
• Wenn Sie schreiben Ihre eigenen code zum behandeln von Tastatur-events ein gute key-code-Referenz ist wirklich praktisch.

Answer 2

Aus der Spitze von meinem Kopf, ich würde denken, dass Sie würde halten müssen, um irgendeine form der Organisation der Daten in das JavaScript, das spiegelt die Elemente in der aktuellen Liste.Würden Sie müssen auch einen Verweis auf die aktuell ausgewählte Element.

Jedes mal, wenn keyup oder keydown wird ausgelöst, update der Referenz zu den aktiven/ausgewählten Element in der Datenstruktur.Zur Akzentuierung Informationen auf der Benutzeroberfläche hinzufügen oder entfernen einer Klasse Namen, die via CSS gestylt basierend darauf, ob das Element aktiv/ausgewählt ist oder nicht.

Auch dies ist nicht eine biggy, aber innerHTML ist nicht wirklich standard (look in createTextNode(), createElement(), und appendChild() für standard-Methoden zum erstellen von Daten).Sie können auch sehen wollen, zum Anhängen von Ereignishandlern in der JavaScript-eher, als dies in ein HTML-Attribut.