使用箭頭鍵來突出顯示div中的鏈接

Question

我有一種類型的自動完成搜索，我正在建設，我想知道是否有一種方法來使用向上/向下箭頭鍵瀏覽結果一旦結果div是所示。

它的工作方式是如果從數據庫返回結果，用結果填充div的HTML並直接在輸入框下顯示div，但我無法弄清楚如何讓用戶使用箭頭鍵導航結果。

結果HTML的例子是;

<div id="divSearchResults" class="AutocompleteSearchResults cfn_ui_search_searchResults" style="visibility: hidden; left: 979px; top: 29px;"> 
<span>Open Client360 Household:</span> 
<a target="_blank" href="/TestApp/default.aspx?ihhid=1">TestHH1</a> 
<a target="_blank" href="/TestApp/default.aspx?ihhid=2">TestHH2</a> 
<a target="_blank" href="/TestApp/default.aspx?ihhid=3">TestHH3</a> 
</div> 

我希望能夠讓用戶用箭頭鍵導航，而是試圖做的DIV一個.focus（）一次它是可見不允許這樣。我讀了一些關於tabindex被設置的東西，但是這對我來說似乎並不起作用，我想，因爲這只是一個隱藏的元素，只有在有結果集時纔會顯示它，可能會更困難。

Answer 1

這裏是你的情況的例子。您與.focus()

第一次在箭頭鍵上向您的span元素指定一個類。

每次您點擊某個鍵時，您都將類.selected和焦點上移或下移addClass(),removeClass()和focus()。這樣，您就知道懸停物品，以及下一個元素，取決於上/下與next()/prev()。

最後，如果你按UP在第一個元素上，那麼轉到最後一個，對於down事件也是一樣的。

---

$(document).on("focus", "#inputSerch", function() { 
    $("#divSearchResults").fadeIn(50); 
}) 

document.onkeydown = function (e) { 
    switch (e.keyCode) { 

     case 38: 
      moveUp(); 
      break; 

     case 40: 
      moveDown(); 
      break; 
    } 
}; 

function moveUp() { 
    if($(".selected").length==0){ 
     $("#divSearchResults span").addClass("selected").focus(); 
    } 
    if ($(".selected").prev("a").length > 0) { 
     $(".selected").removeClass("selected").prev("a").addClass("selected").focus(); 
    } else { 
     $(".selected").removeClass("selected"); 
     $("#divSearchResults a:last-child").addClass("selected").focus(); 
    } 

} 

function moveDown() { 
    if($(".selected").length==0){ 
     $("#divSearchResults span").addClass("selected").focus(); 
    } 
    if ($(".selected").next("a").length > 0) { 
     $(".selected").removeClass("selected").next("a").addClass("selected").focus(); 
    } else { 
     $(".selected").removeClass("selected"); 
     $("#divSearchResults span").next().addClass("selected").focus(); 
    } 
} 

$(document).on("blur", ".selected", function() { 
    $(this).removeClass("selected"); 
}); 

Live exemple