Question

我有div输入时出现的搜索建议keyUp。这很好，但现在我正在努力使键盘快捷键正常运行。

我想要一种行为，例如当您点击向下键盘箭头按钮时，span被选中，如果它被选中，那么之后的另一个span被选中，类似地，如果单击向上箭头，则会选择向上span，当您单击输入时，链接将打开。

我被卡住了，因为我无法移除a：hover并且无法向其添加类。即使我基本上不知道该怎么做。但我真的努力了很多......

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

Answer 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=""属性，这种方法更好。

添加键盘快捷键（向上，向下，输入）以搜索输入建议div

1 个答案: