Come scorrere verso il basso o verso l'alto la tastiera tra le "opzioni" del menu a discesa?

Question

Ho un menu a discesa dinamico basato su Ajax [div] personalizzato.

Ho una casella [di input] che; onkeyup, esegue una ricerca Ajax che restituisce risultati in divs e sono attratti dall'uso innerHTML.Questi divTutti hanno punti salienti onmouseover quindi, una tipica ricerca riuscita produce la seguente struttura (scusate il semi-codice):

[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]

Funziona.

Tuttavia, mi mancano le funzioni importanti dietro i normali elementi HTML.Non riesco a premere verso il basso o verso l'alto tra le "opzioni".

So che JavaScript gestisce gli eventi della tastiera ma;Non sono riuscito a trovare una buona guida.(Naturalmente, la domanda successiva finirà per essere:posso usare <ENTER> per innescarlo onclick evento?)

Answer 1

Quello che devi fare è collegare i listener di eventi al file div con id="results".Puoi farlo aggiungendo onkeyup, onkeydown, eccetera.attribuisce al div quando lo crei oppure puoi allegarli utilizzando JavaScript.

La mia raccomandazione sarebbe di utilizzare una libreria AJAX come YUI, jQuery, Prototipo, eccetera.per due motivi:

1. Sembra che tu stia cercando di creare un file Completamento automatico controllo che è qualcosa che la maggior parte delle librerie AJAX dovrebbe fornire.Se puoi utilizzare un componente esistente risparmierai molto tempo.
2. Anche se non desideri utilizzare il controllo fornito da una libreria, tutte le librerie forniscono librerie di eventi che aiutano a nascondere le differenze tra le API di eventi fornite dai diversi browser.

Dimentica addEvent, usa l'utilità eventi di Yahoo! fornisce un buon riepilogo di ciò che una libreria di eventi dovrebbe offrirti.Sono abbastanza sicuro che le librerie di eventi fornite da jQuery, Prototype, et.al.fornire funzionalità simili.

Se quell'articolo ti passa per la testa, dai un'occhiata questa documentazione prima e poi rileggere l'articolo originale (ho scoperto che l'articolo aveva molto più senso dopo aver utilizzato la libreria eventi).

Un paio di altre cose:

• L'uso di JavaScript ti dà molto più controllo rispetto alla scrittura onkeyup eccetera.attributi nel tuo HTML.A meno che tu non voglia fare qualcosa davvero semplice Vorrei utilizzare JavaScript.
• Se scrivi il tuo codice per gestire gli eventi della tastiera a buon riferimento al codice chiave è davvero utile.

Answer 2

A pensarci bene, penserei che avresti bisogno di mantenere una qualche forma di struttura dati nel JavaScript che rifletta gli elementi nell'elenco a discesa corrente.Avresti anche bisogno di un riferimento all'elemento attualmente attivo/selezionato.

Ogni volta keyup O keydown viene attivato, aggiorna il riferimento all'elemento attivo/selezionato nella struttura dati.Per fornire informazioni di evidenziazione sull'interfaccia utente, aggiungi o rimuovi un nome di classe a cui viene applicato uno stile tramite CSS in base al fatto che l'elemento sia attivo/selezionato o meno.

Inoltre, questo non è un grosso problema, ma innerHTML non è realmente standard (guarda in createTextNode(), createElement(), E appendChild() per le modalità standard di creazione dei dati).Potresti anche voler vedere come allegare gestori di eventi in JavaScript anziché farlo in un attributo HTML.