键盘友好的 AJAX 搜索

Question

我已经实现了类似于这里示例的 AJAX 搜索。在此示例中，您可能会注意到可以使用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

第一部分将跟踪当前聚焦的元素（

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