使用箭头键突出显示 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