/ / przyjazne dla klawiatury wyszukiwanie AJAX - javascript, jquery, css

przyjazne dla klawiatury wyszukiwanie AJAX - javascript, jquery, css

Zaimplementowałem wyszukiwanie AJAX, które jest podobne do przykładu tutaj. W tym przykładzie możesz zauważyć, że możesz przełączać się między wynikami wyszukiwania za pomocą TAB klawisz. W moich wynikach wyszukiwania znajduje się tabela w następującym formacie:

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

Client1, client2, client3 są w rzeczywistości hiperlinkami i należą do klasy search_result_entry. Tak więc, kiedy naciśniesz przycisk strzałki w dół, chciałbym, aby fokus znalazł się w client1 połączyć. The TAB Klucz działa tutaj, ale klawisz strzałki byłby bardziej intuicyjny. Wartości w statusie i nazwie hosta nie są klikalne. Zwróć też uwagę, że używam overflow: auto więc jeśli jest zbyt wiele wyników wyszukiwania, pasek przewijania pokazuje się. W takim przypadku dwukrotne naciśnięcie klawisza TAB powoduje przejście do pierwszego wyniku wyszukiwania.

Próbowałem prób i błędów i próbowałem następującego kodu, ale to nie zadziałało:

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

Jak uzyskać fokus, aby przejść do wyników wyszukiwania za pomocą klawisza strzałki w dół i poruszać się po nim za pomocą klawiszy strzałek w dół / w górę?

Odpowiedzi:

2 dla odpowiedzi № 1
//Keep track of the focused element
var focusedElement = null;

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

I gdzieś w twoim przewodniku:

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

Pierwsza część będzie śledzić aktualnieelement skupiony (jeśli występuje), a druga część zaktualizuje element skupiony (który wyzwoli pierwszą część i zaktualizuje aktualnie aktywny element)