使用箭头键突出显示 div 中的链接

Question

我正在构建一种自动完成搜索，我想知道是否有一种方法可以在结果 div 出现后使用 up/down 箭头键在结果中导航显示。

它的工作方式是如果从数据库返回结果，用结果填充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()

的关系非常密切

第一次将 class 分配给向下箭头键上的 span 元素。

每次你按下一个键，你就会移动 class .selected 和使用 addClass()、removeClass() 和 focus() 上下移动焦点。这样，您就会知道悬停的项目，以及下一个元素将是哪个元素，具体取决于 up/down 和 next()/prev()。

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

$(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

使用箭头键突出显示 div 中的链接

Use Arrow Keys to highlight links in div

html

css

navigation

jquery

arrow-keys