0

キーボードを完全にサポートする独自のAJAX自動提案テキストボックスを作成した経験はありますか？

SQL DBにプラグインして結果を表示することにより、自動提案アスペクトを正常に作成しましたが、検索結果を操作する唯一の方法は、マウスを使用することです。キーボードで上下にスクロールし、Enterキーを使用してアイテムを選択し、関連するページにリダイレクトできるようにしたい。

上下の矢印を使用してHTML要素をスクロールする方法を詳しく説明している記事やヘルプフォーラムページを数え切れないほど見ましたが、Enterキーをアイテムの選択と関連ページへのリダイレクトに組み込む方法を説明するものはありません。

使用できるすべての自動提案プラグインを知っていますが、ここまで自分でプラグインを作成してきました。他の人の作業に固定するのではなく、結果にコンテンツを追加できるようにしたいと考えています。

誰かが私を正しい方向に向けることによって私を助けることができれば、私は非常に感謝するでしょう。

乾杯

4

1 に答える 1

0

あなたがすでにコードを持っているかどうか、そしてそれがどのように見えるか（存在する場合）はわからないので、この答えは間違いなく「正しい方向を指す」というカテゴリに分類されます。

提案付きのドロップダウンをすでに作成しているとおっしゃっていたので、スタイルと配置のためにCSSとJSを省略します。
ドロップダウンがこのマークアップで構成されていると仮定しましょう。

<div id="suggestiondropdown">
    <span class="suggestion" data-page="[URL of page]">Suggestion 1</span>
    <span class="suggestion" data-page="[URL of page]">Suggestion 2</span>
    <span class="suggestion" data-page="[URL of page]">Suggestion 3</span>
    <span class="suggestion" data-page="[URL of page]">Suggestion 4</span>
    <span class="suggestion" data-page="[URL of page]">Suggestion 5</span>
</div>

このJSを使用すると、矢印キーを使用して提案間を移動できるはずです。

var suggestions = document.querySelectorAll(".suggestion"); // Now suggestions is an array with the spans
var index = 0;
document.onkeypress = function(e) {
    // Style the selected as normal here:
    suggestions[index].style.backgroundColor = "#FFFFFF";
    if (e.keyCode == 38) { // UP!
        if (index <= 0) index = suggestions.length;
        index--;
    }
    else if (e.keyCode == 40) { // DOWN!
        if (index >= suggestions.length -1) index = -1;
        index++;
    }
    else if (e.keyCode == 13) { // ENTER!
         var page = suggestions[index].dataset.page;
         window.location.href = page; // Or with relative URLs, first prepend the base URL.
    }
    // Style the selected one as selected here.
    // I don't know how you want it, so I'll just give the selected one a blue background.
    suggestions[index].style.backgroundColor = "#0000FF"; // Never mind the ugly shade

}

テストされていません

于 2013-01-30T16:22:04.470 に答える