0

我有一个搜索建议div，当您keyUp输入时会出现。这很好用，但现在我正在尝试使用键盘快捷键。

我想要一种行为，例如当您单击down键盘箭头按钮时，aspan被选中，如果它被选中，则另一个span被选中，类似地，如果您单击up箭头，则向上span选中，当您单击时，enter链接将打开。

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

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

4

1 回答 1

1

发出请求并返回数据时，应执行此代码：

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

在发出请求的页面上的这段代码：

$("#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");
                    }
                });

            })

;

我还删除onkeyup=""了元素上的属性，这种方法更好。

于 2013-01-11T13:01:10.020 回答