ドロップダウンの「オプション」の間でキーボードを押したり上げたりする方法は?

Question

カスタムビルドの 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 イベント？）

Answer 1

行う必要があるのは、イベント リスナーを div と id="results". 。追加することでこれを行うことができます onkeyup, onkeydown, 、など。の属性 div 作成時に追加することも、JavaScript を使用してこれらを添付することもできます。

私の推奨事項は、次のような AJAX ライブラリを使用することです。 ゆい, jQuery, プロトタイプ, 、など。次の 2 つの理由からです。

1. を作成しようとしているようです オートコンプリート これはほとんどの AJAX ライブラリが提供すべきものです。既存のコンポーネントを使用できる場合は、時間を大幅に節約できます。
2. ライブラリによって提供されるコントロールを使用したくない場合でも、すべてのライブラリは、さまざまなブラウザによって提供されるイベント API 間の違いを隠すのに役立つイベント ライブラリを提供します。

addEvent は忘れて、Yahoo! のイベント ユーティリティを使用してください は、イベント ライブラリが提供すべき内容の概要を示しています。jQuery、Prototype などが提供するイベント ライブラリは確実に機能します。アル。同様の機能を提供します。

この記事が気になる場合は、以下を参照してください このドキュメント まず元の記事を読み直してください (イベント ライブラリを使用した後、記事がより意味をなしていることがわかりました)。

他にもいくつか:

• JavaScript を使用すると、記述するよりもはるかに詳細な制御が可能になります。 onkeyup 等属性を HTML に追加します。何かをしたいのでなければ 本当にシンプルな 私ならJavaScriptを使います。
• キーボード イベントを処理する独自のコードを作成する場合、 優れたキーコードリファレンス 本当に便利です。

Answer 2

私の頭の考えでは、現在のドロップダウン リストの項目を反映する何らかの形式のデータ構造を JavaScript で維持する必要があると思います。現在アクティブ/選択されている項目への参照も必要です。

毎回 keyup または keydown が起動されると、データ構造内のアクティブ/選択された項目への参照が更新されます。UI 上で情報を強調表示するには、項目がアクティブ/選択されているかどうかに基づいて CSS でスタイル設定されたクラス名を追加または削除します。

あと、これは大したことではないのですが、 innerHTML 実際には標準ではありません（調べてください） createTextNode(), createElement(), 、 そして appendChild() データ作成の標準的な方法については)。HTML 属性ではなく JavaScript でイベント ハンドラーをアタッチする方法についても参照してください。