鍵盤友好AJAX搜索

我已經實現了AJAX搜索這是類似的例子here。在本例中，您可能會注意到，您可以使用TAB鍵在搜索結果之間切換。在我的搜索結果中，存在以下格式的表：鍵盤友好AJAX搜索

*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(); 
    }); 
}

如何獲得重點使用向下箭頭鍵移動到搜索結果中，並在其中導航使用向下/向上箭頭鍵？

來源

2012-08-07 Rahul Desai

你可以在jsfiddle.com上發佈你的代碼 – 2012-08-07 14:41:22

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

，第一部分將跟蹤當前聚焦元素（如果有的話），第二部分將更新聚焦元素（這將觸發第一部分和更新當前集中的元素）

來源

2012-08-07 14:41:56 rsplak

對不起，這個工作適合我。我將你的代碼放置在我正在實現搜索功能的onkeyup事件中。然而，它力道通過。 – 2012-08-07 14:59:45

鍵盤友好AJAX搜索

回答

相關問題