键盘友好的 AJAX 搜索

Question

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

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

Client1, client2, client3 实际上是超链接，属于search_result_entry 类。因此，当按下向下箭头键时，我希望焦点转到client1 链接。 TAB 键在这里有效，但箭头键会更直观。 status 和 hostname 中的值不可点击。另外，请注意我使用的是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

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