Javascript 添加键盘快捷键（向上、向下、回车）以搜索输入建议div

我有一个搜索建议

div

，当您输入

keyUp

时会出现。这很好用，但现在我正在尝试使用键盘快捷键

我想要一种行为，比如当你点击键盘下箭头按钮时，一个

span

被选中，如果它被选中，那么另一个

span

被选中，同样地，如果你点击向上箭头，一个向上的

span

被选中，当你点击回车时，链接打开

我被卡住了，因为我无法删除：hover，也无法向其中添加类。即使在我基本上不知道怎么做之后。但是我真的很努力而且做了很多

---

这是一个（在字段中键入任何内容）。也许有人会帮助我。

当提出请求并返回数据时，此代码应消失：

<script type="text/javascript">
    $(document).ready(function(){
        total = 3;
        $(".result-item").mouseenter(
            function(){
                hovered = $(this).attr("id");
                total = 3;

                $(".result-item").each(function(){
                    $(this).children("a").css({
                        'background-color':'#e4e4e4',
                        'color':'#000000'
                    });

                    $(this).find(".searchheading").css({
                            'color':'#191919'
                        });

                    $(this).find(".searchcaption").css({
                        'color':'#555555'
                    });
                });

                $(this).children("a").css({
                    'background-color':'#b7b7b7',
                    'color':'#ffffff'
                });

                $(this).find(".searchheading").css({
                    'color':'#ffffff'
                });

                $(this).find(".searchcaption").css({
                    'color':'#f1f1f1'
                });
            }
        );

    });
</script>

)

---

另外，我删除了元素上的

onkeyup=“

属性，这种方法更好。

在任何情况下，都不要在标题中添加

[SOLVED]

。为了对社区最有帮助，请将解决方案发布为下面的答案，并接受它。OK。谢谢我理解

$("#suggestions").hide();

                $("#search").bind('keyup', function(event){
                    if (event.which == 40 || event.which == 38 || event.which == 13) return false;
                    else
                    {
                        hovered = undefined;
                        lookup($(this).val());
                    }
                });


                $("#search").bind('keydown', 'down', function(evt){
                    if ($("#suggestions").is(":visible"))
                    {
                        if (typeof hovered == 'undefined')
                        {
                            $("#result-item-0").trigger("mouseenter");
                            return;
                        }

                        count = parseInt($("#"+hovered).attr("count"));
                        next = (count + 1);

                        if (next == total)
                            next = 0;

                        $("#result-item-"+next).trigger("mouseenter");
                    }
                });

                $("#search").bind('keydown', 'up', function(evt){
                    if ($("#suggestions").is(":visible"))
                    {
                        if (typeof hovered == 'undefined')
                        {
                            $("#result-item-"+(total-1)).trigger("mouseenter");
                            return;
                        }

                        count = parseInt($("#"+hovered).attr("count"));
                        prev = (count - 1);

                        if (prev == -1)
                            prev = (total-1);

                        $("#result-item-"+prev).trigger("mouseenter");
                    }
                });

                $("#search").bind('keydown', 'return', function(evt){
                    if ($("#suggestions").is(":visible"))
                    {
                        if (typeof hovered == 'undefined')
                        {
                            str = $("#search").val();
                            window.location.href = urlencode(str); // urlencode is a custom function
                            return false;
                        }

                        count = parseInt($("#"+hovered).attr("count"));
                        current = count;
                        $("#result-item-"+current).trigger("mouseenter");

                        $("#suggestions").fadeOut();
                        window.location.href = $("#"+hovered).children("a").attr("href");
                    }
                });

            })