Javascript 使用按键代码在可滚动div中上下导航

我有一个可搜索的文本框，它用搜索结果填充一个div。div是可滚动的。我试图实现的是通过页面上下（键码38和40）浏览结果项。但只要我尝试这个，整个div就会滚动，结果项本身不会接受新选择的css类

下面是我的一些代码

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

this.TagNavigation=函数（事件）{
var div=$（“#TagSearchResults”）；
var锚=$（“#TagSearchResults a”）；
var selectedAnchor=$（“#TagSearchResults a.selected”）；
变量位置=锚。索引（选择锚）；
如果（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（）！=“开始键入以搜索标记”）{
FRAMEWORK.AddNewTag（$（“#txtTagSearch”）.val（）；
}
否则如果（event.keyCode==“38”）{
如果（位置>0）{
canClose=false；
selectedAnchor.removeClass（“selected”）；
var newSelectedAnchor=$（anchors.get（位置-1））；
newSelectedAnchor.addClass（“选定”）；
$（“#txtTagSearch”）.val（newSelectedAnchor.text（））；
}
}
否则如果（event.keyCode==“40”）{
如果（位置=3）{
框架。RenderSearchResults（文本）；
}
否则{
$（“#TagSearchResults”）.html（“”）；
$（“#标记搜索结果”）.hide（）；
}
};

正如您在TagNavigation函数（keycode 40）中看到的，我试图将焦点设置在活动元素上，但仍然没有成功

---

请提供任何帮助。

您需要检查新选择的元素是否具有比包含div的底部更高的Y值。如果是，请按新元素的高度滚动div。将“If（event.keyCode==“40”）”语句更改为以下内容：

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);
                }
            }
        }
    };

this.TagNavigation=函数（事件）{
var div=$（“#TagSearchResults”）；
var锚=$（“#TagSearchResults a”）；
var selectedAnchor=$（“#TagSearchResults a.selected”）；
变量位置=锚。索引（选择锚）；
如果（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（）！=“开始键入以搜索标记”）{
FRAMEWORK.AddNewTag（$（“#txtTagSearch”）.val（）；
}
否则如果（event.keyCode==“38”）{
如果（位置>0）{
canClose=false；
selectedAnchor.removeClass（“selected”）；
var newSelectedAnchor=$（anchors.get（位置-1））；
newSelectedAnchor.addClass（“选定”）；
$（“#txtTagSearch”）.val（newSelectedAnchor.text（））；
var newselectedanchorpostion=newSelectedAnchor.offset（）；
var divPosition=div.offset（）；
divPosition=divPosition.top；
if（newselectedanchorposition.top+1>divPosition）{
var newPos=div.scrollTop（）-newSelectedAnchor.outerHeight（）；
分区滚动顶部（新位置）；
}
}
}
否则如果（event.keyCode==“40”）{
如果（位置<锚固件长度-1）{
canClose=false；
selectedAnchor.removeClass（“selected”）；
var newSelectedAnchor=$（anchors.get（position+1））；
newSelectedAnchor.addClass（“选定”）；
$（“#txtTagSearch”）.val（newSelectedAnchor.text（））；
var newselectedanchorpostion=newSelectedAnchor.offset（）；
var divPosition=div.offset（）；
divPosition=divPosition.top+div.outerHeight（）；
if（newselectedanchorposition.top+1>=divPosition）{
var newPos=div.scrollTop（）+newSelectedAnchor.outerHeight（）；
分区滚动顶部（新位置）；
}
}
}
};

太好了，它成功了。对于页面，我们可以从divPosition声明中删除+div.outerHeight（）