リンクボタン付きオートコンプリートドロップダウン - または「AJAXがワイルドになった」

[OK]をクリックして、オートコンプリートドロップダウンを選択肢として使用します。したがって、ユーザはカーソルを「テキストボックス」に置き、オプションのリストで挨拶をする。リストの絞り込みを開始するか、リストのいずれかのオプションを選択することができます。クリックされると（またはEnterキーを押すと）、このリンク先のデータセットが選択項目にフィルタされます。リンクボタン付きオートコンプリートドロップダウン - または「AJAXがワイルドになった」

これはAJAXのオートコンプリートをドロップダウンで囲むのと同じくらい簡単ですか？いいえ？

出典

2008-09-02 Sara Chipps

このウィジェットは、テキスト入力、ボタン入力、および結果を保持する順序付けられていないリストの3つの項目で作成できます。

__________ _ 
|__________||v|__    <-- text and button 
    |    |   <-- ul (styled to appear relative to text input) 
    |    | 
    |    | 
    |______________|

に示すUL：

テキスト入力（値が空でない場合）
の「keyUpイベント」イベントボタン入力（現在表示されていない場合）のイベントを「クリック」

ULに隠さ：

'クリック' 前夜祭ULが示されているか、テキスト入力の「keyUpイベント」イベントは、サーバーのニーズにAJAX呼び出しをトリガされると、ボタン入力（現在表示されている場合）
のリスト項目

のイベントを「クリック」のntリストを更新するようにされる。

成功すると結果はulに入れてください。リストアイテムを作成するときには、テキスト入力値を設定し、ulを隠す（クリックイベントを付加する必要があるかもしれない）「click」イベントを添付する必要があります。

本当に難しいのはCSSです。 JavaScriptは、複数のブラウザをサポートするプロトタイプのような堅牢なライブラリを使用すると特に簡単です。

アイテムのIDをいくつかサポートする必要があります。そのため、IDを持つ各リストアイテムに隠れた入力を追加して、テキスト入力の隣に選択アイテムIDを格納することができます。

出典

2008-12-03 22:50:15 thoughtcrimes

ユーザーの選択に基づいてデータセットを再バインドするには、ドロップダウンリストのOnSelectedIndexChangedイベントを処理する必要があります。非同期ポストバックでフィルタリングを行う場合は、データセット（または私が想定しているデータグリッド）とドロップダウンをUpdatePanelでラップします。とにかくそれを行う1つの方法です。

出典

2008-09-02 20:20:25 JasonS

-1

私の意見では、このためにAJAXを使用しないでください。

はここにある理由：

（1）フォーカスオン：彼は選択することができ、すべてのオプションがドロップダウンに示されています。これは、すべての可能なオプションがすでにクライアントに送信されていることを意味します。

（2）ユーザが何かを入力すると、ドロップダウンのエントリ数が一致するようにフィルタされます。これは簡単にクライアント側で行うことができます。 ajax'yであり、この時点でサーバーに戻ると、遅くなるだけです。

phpguru。orgが必要なもの「ほぼ正確」であるコントロールを持っています

http://www.phpguru.org/static/AutoComplete.html#demo

それはあなたがそれがフォーカスをクリックし、ダブルの代わりにドロップダウンを示すことで必要なものとは少し異なります。それはかなり簡単に変更できるはずです。

こちらがお役に立てば幸いです。

出典