键盘友好的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屋!