键盘友好的AJAX搜索 [英] keyboard friendly AJAX search

问题描述

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

I have implemented the AJAX search which is similar to the example here. In this example, you might notice that you can switch between the search results using TAB key. In my search results, there is a table in the following format:

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

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

Client1, client2, client3 are actually hyperlinks and are in the class search_result_entry. So, when down arrow key is pressed, I would like the focus to go to the client1 link. The TAB key works here, but the arrow key would be more intuitive. The values in status and hostname are not clickable. Also, note that I am using overflow: auto so if there are too many search results, the scrollbar shows up. In this case, hitting the TAB key twice gets me to the first search result.

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

I was doing trial and error and tried the following code, but it did not work:

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

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

How do I get the focus to move to the search results using the down arrow key and navigate in it using the down/up arrow keys?

推荐答案

//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

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

The first part will keep track of the currently focused element (if any) and the second part will update the focused element (which will trigger the first part and update the currently focused element)

这篇关于键盘友好的AJAX搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！