Scroll up and down a scrollable div using key codes

Question

I have a searchable text box that fills a div with search results. Div is scrolling. What I'm trying to achieve is to navigate through the elements of the result with a page up and down (key codes 38 and 40). But as soon as I try this, all scroll divs, and the result itself does not accept the new selected css class.

Below is the code of my 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" && anchors.length > 0) { FRAMEWORK.AddUpdateInterventionTags(selectedAnchor.attr("id").split("-")[1] + "|" + selectedAnchor.text(), "add"); } if (event.keyCode == "13" && anchors.length == 0 && $("#txtTagSearch").val() != "Start typing to search Tags") { FRAMEWORK.AddNewTag($("#txtTagSearch").val()); } else if (event.keyCode == "38") { if (position > 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 <= 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 >= 3) { FRAMEWORK.RenderSearchResults(text); } else { $("#TagSearchResults").html(""); $("#TagSearchResults").hide(); } }; 

As you can see in the TagNavigation function (keycode 40), I tried to set the focus on the active element, but still did not succeed.

Any help please.

Answer 1

You need to check the weather that the newly selected item has a higher Y value, which is at the bottom of the containing div. If so, scroll down the div to the height of the new element. Change the if statement (event.keyCode == "40") to the following:

 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" && anchors.length > 0) { FRAMEWORK.AddUpdateInterventionTags(selectedAnchor.attr("id").split("-")[1] + "|" + selectedAnchor.text(), "add"); } if (event.keyCode == "13" && anchors.length == 0 && $("#txtTagSearch").val() != "Start typing to search Tags") { FRAMEWORK.AddNewTag($("#txtTagSearch").val()); } else if (event.keyCode == "38") { if (position > 0) { canClose = false; selectedAnchor.removeClass("selected"); var newSelectedAnchor = $(anchors.get(position - 1)); newSelectedAnchor.addClass("selected"); $("#txtTagSearch").val(newSelectedAnchor.text()); var newSelectedAnchorPosistion = newSelectedAnchor.offset(); var divPosition = div.offset(); divPosition = divPosition.top; if (newSelectedAnchorPosistion.top + 1 > divPosition) { var newPos = div.scrollTop() - newSelectedAnchor.outerHeight(); div.scrollTop(newPos); } } } else if (event.keyCode == "40") { if (position < anchors.length - 1) { canClose = false; selectedAnchor.removeClass("selected"); var newSelectedAnchor = $(anchors.get(position + 1)); newSelectedAnchor.addClass("selected"); $("#txtTagSearch").val(newSelectedAnchor.text()); var newSelectedAnchorPosistion = newSelectedAnchor.offset(); var divPosition = div.offset(); divPosition = divPosition.top + div.outerHeight(); if (newSelectedAnchorPosistion.top + 1 >= divPosition) { var newPos = div.scrollTop() + newSelectedAnchor.outerHeight(); div.scrollTop(newPos); } } } };