ricerca AJAX amichevole con la tastiera - javascript, jquery, css

Ho implementato la ricerca AJAX che è simile all'esempio Qui. In questo esempio, potresti notare che puoi passare tra i risultati della ricerca usando TAB chiave. Nei miei risultati di ricerca, esiste una tabella nel seguente formato:

*Client*  *Status*  *Hostname*
<client1>   value     value
<client2>   value     value
<client3>   value     value

Client1, client2, client3 sono in realtà collegamenti ipertestuali e sono nella classe search_result_entry. Quindi, quando si preme il tasto freccia giù, vorrei che lo stato attivo andasse a client1 collegamento. Il TAB la chiave funziona qui, ma la chiave della freccia sarebbe più intuitiva. I valori in status e hostname non sono selezionabili. Inoltre, nota che sto usando overflow: auto quindi se ci sono troppi risultati di ricerca, la barra di scorrimento si presenta. In questo caso, premendo due volte il tasto TAB, si ottiene il primo risultato di ricerca.

Stavo facendo tentativi ed errori e ho provato il seguente codice, ma non ha funzionato:

if (e.which == 40){    // 40 is the ASCII for down arrow key
$("#keyword").focusout();
$("#results").focus(function(){
$(this).next("td").focus();
});
}

Come faccio a focalizzare l'attenzione sui risultati della ricerca usando il tasto freccia giù e navigare all'interno usando i tasti freccia su / giù?

risposte:

//Keep track of the focused element
var focusedElement = null;

// update it on focus
$("#results").focus(function(){
focusedElement = this;
});

E da qualche parte nel tuo gestore:

//... code
if (e.which == 40){    // 40 is the ASCII for down arrow key
if(focusedElement) $(focusedElement).next().focus();
else $("#results").somethingToGetYourFirstElementDependingOnYourCode().focus();
}
//... more code

La prima parte terrà traccia del correnteelemento focalizzato (se presente) e la seconda parte aggiornerà l'elemento focalizzato (che attiverà la prima parte e aggiornerà l'elemento attualmente focalizzato)