Navigate up and down in scrollable div with keycodes
<p>I have  a searchable textbox which populates a div with the search results. The div is scrollable. What I am trying to achieve, is to navigate through the result items with page up and down (keycode 38 &amp; 40). But as soon as I try this, the whole div scrolls, and the result item itself does not take on the new selected css class.</p>

<p>Below is some of my code</p>

<pre><code>this.TagNavigation = function (event) {
    var div = $("#TagSearchResults");
    var anchors = $("#TagSearchResults a");
    var selectedAnchor = $("#TagSearchResults a.selected");
    var position = anchors.index(selectedAnchor);

        if (event.keyCode == "13" &amp;&amp; anchors.length &gt; 0) {
            FRAMEWORK.AddUpdateInterventionTags(selectedAnchor.attr("id").split("-")[1] + "|" + selectedAnchor.text(), "add");
        }
        if (event.keyCode == "13" &amp;&amp; anchors.length == 0 &amp;&amp; $("#txtTagSearch").val() != "Start typing to search Tags") {
            FRAMEWORK.AddNewTag($("#txtTagSearch").val());
        }
        else if (event.keyCode == "38") {

            if (position &gt; 0) {
                canClose = false;
                selectedAnchor.removeClass("selected");
                var newSelectedAnchor = $(anchors.get(position - 1));
                newSelectedAnchor.addClass("selected");
                $("#txtTagSearch").val(newSelectedAnchor.text());
            }
        }
        else if (event.keyCode == "40") {

            if (position &lt;= anchors.length) {
                canClose = false;
                selectedAnchor.removeClass("selected");
                var newSelectedAnchor = $(anchors.get(position + 1));
                newSelectedAnchor.addClass("selected");
                $("#txtTagSearch").val(newSelectedAnchor.text());
                //newSelectedAnchor.focus();
            }
        }
    };

    this.AjaxSearch = function (text) {
        var div = $("#TagSearchResults");
        var anchors = $("#TagSearchResults a");
        var selectedAnchor = $("#TagSearchResults a.selected");
        var position = anchors.index(selectedAnchor);

        if (event.keyCode == "13") {
            FRAMEWORK.TagNavigation(event);
        }
        else if (event.keyCode == "38") {
            FRAMEWORK.TagNavigation(event);
        }
        else if (event.keyCode == "40") {
            FRAMEWORK.TagNavigation(event);
        }
        else if (text.length &gt;= 3) {
            FRAMEWORK.RenderSearchResults(text);
        }
        else {
            $("#TagSearchResults").html("");
            $("#TagSearchResults").hide();
        }
    };
</code></pre>

<p>As you can see in the TagNavigation function (keycode 40), I tried to set the focus on the active element, but still no success.</p>

<p>Any help please.</p>
