20

カスタムビルドの ajax [div] ベースの動的ドロップダウンがあります。

[input] ボックスがあります。onkeyup、結果を s に返す 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

4

2 に答える 2

9

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

次の2つの理由から、YUI、jQuery、PrototypeなどのAJAXライブラリを使用することをお勧めします。

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

addEventを忘れて、Yahoo！のイベントユーティリティを使用すると、イベントライブラリが提供する内容の概要がわかります。jQuery、Prototypeなどによって提供されるイベントライブラリはかなり確実です。al。同様の機能を提供します。

その記事が頭に浮かんだら、最初にこのドキュメントを見てから、元の記事を読み直してください（イベントライブラリを使用した後、記事の方がはるかに理にかなっていることがわかりました）。

他のいくつかのこと：

  • onkeyupJavaScriptを使用すると、HTMLにetc.属性を書き込むよりもはるかに細かく制御できます。本当に簡単なことをしたいのでなければ、JavaScriptを使います。
  • キーボードイベントを処理する独自のコードを作成する場合は、優れたキーコードリファレンスが非常に便利です。
于 2008-08-17T20:48:41.760 に答える
1

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

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

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

于 2008-08-07T16:11:58.413 に答える