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键在第一个元素上，则转到最后一个元素，同样用于向下事件。

$(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中的链接

1 个答案: