ドロップダウンの「オプション」の間でキーボードを押したり上げたりする方法は?
-
08-06-2019 - |
質問
カスタムビルドの ajax [div] ベースの動的ドロップダウンがあります。
[入力]ボックスがあります。 onkeyup
, 、Ajax 検索を実行し、結果を返します。 div
を使用して引き戻されます innerHTML
. 。これら div
どれもハイライトがある onmouseover
したがって、一般的な検索が成功すると、次の構造が得られます (セミコードはご容赦ください)。
[input]
[div id=results] //this gets overwritten contantly by my AJAX function
[div id=result1 onmouseover=highlight onclick=input.value=result1]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[/div]
それは動作します。
ただし、通常の HTML 要素の背後にある重要な機能が欠けています。「オプション」の間でキーボードを押したり上げたりすることができません。
JavaScript がキーボード イベントを処理することは知っていますが、良いガイドが見つかりませんでした。(もちろん、その後の質問は次のようになります。使ってもいいですか <ENTER>
それを引き起こすために onclick
イベント?)
解決
行う必要があるのは、イベント リスナーを div
と id="results"
. 。追加することでこれを行うことができます onkeyup
, onkeydown
, 、など。の属性 div
作成時に追加することも、JavaScript を使用してこれらを添付することもできます。
私の推奨事項は、次のような AJAX ライブラリを使用することです。 ゆい, jQuery, プロトタイプ, 、など。次の 2 つの理由からです。
- を作成しようとしているようです オートコンプリート これはほとんどの AJAX ライブラリが提供すべきものです。既存のコンポーネントを使用できる場合は、時間を大幅に節約できます。
- ライブラリによって提供されるコントロールを使用したくない場合でも、すべてのライブラリは、さまざまなブラウザによって提供されるイベント API 間の違いを隠すのに役立つイベント ライブラリを提供します。
addEvent は忘れて、Yahoo! のイベント ユーティリティを使用してください は、イベント ライブラリが提供すべき内容の概要を示しています。jQuery、Prototype などが提供するイベント ライブラリは確実に機能します。アル。同様の機能を提供します。
この記事が気になる場合は、以下を参照してください このドキュメント まず元の記事を読み直してください (イベント ライブラリを使用した後、記事がより意味をなしていることがわかりました)。
他にもいくつか:
- JavaScript を使用すると、記述するよりもはるかに詳細な制御が可能になります。
onkeyup
等属性を HTML に追加します。何かをしたいのでなければ 本当にシンプルな 私ならJavaScriptを使います。 - キーボード イベントを処理する独自のコードを作成する場合、 優れたキーコードリファレンス 本当に便利です。
他のヒント
私の頭の考えでは、現在のドロップダウン リストの項目を反映する何らかの形式のデータ構造を JavaScript で維持する必要があると思います。現在アクティブ/選択されている項目への参照も必要です。
毎回 keyup
または keydown
が起動されると、データ構造内のアクティブ/選択された項目への参照が更新されます。UI 上で情報を強調表示するには、項目がアクティブ/選択されているかどうかに基づいて CSS でスタイル設定されたクラス名を追加または削除します。
あと、これは大したことではないのですが、 innerHTML
実際には標準ではありません(調べてください) createTextNode()
, createElement()
, 、 そして appendChild()
データ作成の標準的な方法については)。HTML 属性ではなく JavaScript でイベント ハンドラーをアタッチする方法についても参照してください。