Adding keyboard shortcuts (up, down, enter) to search input suggestions div

Question

I have a search suggestion div that appears when you keyUp an input. This works fine, but now I am trying to make keyboard shortcuts in action.

I want a behavior like when you click down keyboard arrow button a span gets selected and if it is selected then another span that is after gets selected, similarly, if you click up arrow an upward span gets selected, when you click enter then link opens.

I am stuck because I could not remove a:hover and could not add classes to it. Even after I have basically no idea how to do it. But I really tried hard and a lot..

Here is a jsfiddle link (type anything in field). maybe somebody will help me.

Answer 1

This code should go when the request is made and data is being returned:

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

And this code on a page where request is made:

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

            })

;

Also I removed onkeyup="" attribute on element, this approach is nicer.