Question

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

*Client*  *Status*  *Hostname*
<client1>   value     value
<client2>   value     value
<client3>   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

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

键盘友好的AJAX搜索

1 个答案: