使用箭头键高亮显示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元素指定一个类。

每次按下键时，都会使用addClass()、removeClass()和focus()向上或向下移动类.selected和焦点。通过这种方式，您可以知道悬停的项目，以及下一个将是哪个元素，这取决于next()/prev()的向上/向下。

最后，如果在第一个元素上按UP，则转到最后一个元素，向下事件也是如此。

---

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

实例