键盘友好的AJAX搜索

我已经实现了AJAX搜索，这与此处的示例类似。 在此示例中，您可能会注意到可以使用TAB键在搜索结果之间切换。 在我的搜索结果中，有一个表格格式如下：

 *Client* *Status* *Hostname*  value value  value value  value value 

Client1, client2, client3实际上是超链接，位于search_result_entry类中。 因此，当按下向下箭头键时，我希望焦点转到client1链接。 TAB键在这里工作，但箭头键更直观。 状态和主机名中的值不可单击。 此外，请注意我使用overflow: auto所以如果搜索结果太多，滚动条会显示出来。 在这种情况下，按两次TAB键可以获得第一个搜索结果。

我正在进行试验和错误并尝试以下代码，但它不起作用：

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

如何使用向下箭头键将焦点移至搜索结果并使用向下/向上箭头键在其中导航？

Answer 1

 //Keep track of the focused element var focusedElement = null; // update it on focus $("#results").focus(function(){ focusedElement = this; }); 

在你的处理程序中的某个地方：

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

第一部分将跟踪当前聚焦的元素（如果有的话），第二部分将更新聚焦元素（将触发第一部分并更新当前聚焦的元素）