4

検索結果を 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();
        }
    };

TagNavigation 関数 (キーコード 40) でわかるように、アクティブな要素にフォーカスを設定しようとしましたが、まだ成功していません。

助けてください。

4

1 に答える 1

1

新しく選択した要素の Y 値が、含まれている div の下部よりも高いことを確認する必要があります。その場合は、新しい要素の高さだけ 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);
                }
            }
        }
    };
于 2012-08-17T07:37:30.723 に答える