Jquery 使用箭头键高亮显示div中的链接

我正在构建一种自动完成搜索，我想知道是否有一种方法可以在显示结果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>

Open Client360家庭：

---

我希望能够让用户使用箭头键导航，但一旦div可见，尝试对其执行.focus（）操作是不允许的。我读了一些关于设置tabindex的资料，但这似乎对我也不起作用，我想，因为这只是一个隐藏元素，只有在有结果集时才会显示，所以可能会更困难。

下面是一个例子。您与

.focus（）

第一次按向下箭头键为span元素指定一个类

每次按下键时，您都会使用

addClass（）

、

removeClass（）

和

focus（）

向上或向下移动类

。这样，您就可以知道悬停的项目以及下一个元素是哪个元素，这取决于使用
next（）
/
prev（）

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



这太棒了，谢谢你！我正在使用它，并让moveUp事件工作，但在moveDown上，由于它默认为文档，所以它会移动页面上以及divSearchResults元素中的滚动条。有没有一种方法我可以禁用页面滚动箭头，而这是可见的，我可以处理的位置只是好奇，如果你听说过什么，再次感谢！我现在无法测试，但也许您可以在调用moveUp（）/moveDown（）函数之前尝试添加e.preventDefault（）。我刚刚尝试了
e.preventDefault（）
，它正按照您的预期工作：
$(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");
});