Javascriptキーボードイベントのプライマー？ （または、むしろ：私のカスタムドロップダウンで私を助けてください）

Question

私は、カスタムビルドajax [div]ベースの動的ドロップダウンを完了するための助けが必要です。

基本的には、[入力]ボックスがあります。 onkeyupは、divで結果の束を返すAjax検索を実行し、innerHTMLを使用して戻されます。美しく...それは動作します

[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] 

：これらのdivのすべてがそうハイライトonmouseoverを持っている、典型的な成功の検索は、以下の構造（半コードはご容赦）得！エレガントに見え、どんな通常のドロップダウンよりも完全です（これらの結果は多くの情報をもたらします）。

しかし、通常のHTML要素の背後にある重要な機能のほとんどが欠落しています。つまり、「オプション」の間にキーボードを上下させることができません。これはどうすればいいですか？私はjavascriptがキーボードイベントを処理することは知っていますが、私はこれを行う方法の良いガイドを見つけることができませんでした。 （もちろん、これに続く質問は最終的には終わります：onclickイベントをトリガーするのに<ENTER>を使うことができますか？）

Answer 1

divにイベントリスナーを添付すると、id="results"となります。これを行うには、divにonkeyup、onkeydownなどの属性を追加するか、JavaScriptを使用して添付することができます。

私の推薦は、あなたは二つの理由などYUI、jQuery、Prototype、のようなAJAXライブラリを使用することになります：あなたは何か、ほとんどのAJAXするライブラリですAuto Completeコントロールを作成しようとしているようですね

1. 提供する必要があります。既存のコンポーネントを使用することができれば、多くの時間を節約できます。
2. ライブラリが提供するコントロールを使用したくない場合でも、すべてのライブラリは、さまざまなブラウザで提供されるイベントAPIの違いを隠すイベントライブラリを提供します。

Forget addEvent, use Yahoo!’s Event Utilityは、イベントライブラリがあなたに提供すべきものを要約しています。 jQuery、Prototypeなどで提供されているイベントライブラリはかなり確信しています。 al。同様の機能を提供します。

もし記事があなたの頭を越えていたら、最初にthis documentationを見てから、元の記事を再読み込みしてください（私はイベントライブラリを使った後、もっと記事を読んでいました）。

他の物事のカップル：

• JavaScriptを使用しては、あなたのHTMLに属性をあなたになどonkeyupを書くよりもはるかに制御することができます。あなたが何かしたいことがない限り、はとてもシンプルです JavaScriptを使用します。
• キーボードイベントを処理する独自のコードを書く場合は、good key code referenceが便利です。

Answer 2

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

keyupまたは​​が実行されるたびに、データ構造内のアクティブ/選択項目への参照を更新します。 UIでハイライト情報を提供するには、アイテムがアクティブ/選択されているかどうかに基づいてCSSを使用してスタイル設定されたクラス名を追加または削除します。

は実際には標準ではありません（データの標準的な作成方法については、createTextNode(),createElement()、appendChild()を参照してください）。 JavaScriptでイベントハンドラをアタッチする方法については、HTMLアトリビュートではなく、アタッチしてみてください。