ドロップダウンの候補があるテキストボックス

Question

私は現在、ASP.Net C＃2.0 Webサイト上にデータバインドされたドロップダウンリストを持っています。私はあなたが手紙を入力し、それらの文字で始まるエントリだけがポップアップするGoogle検索のテキストボックスのような何かに置き換えたい

それを実装する良い方法は何ですか？誰かが提案できる既存のコントロールがありますか？

Answer 1

はtutorialは、これらが知らenrtiesしている場合、あなたはjQueryのを使用することができますASP.Net

Answer 2

と共に使用するためのものである、とにonUpdateイベントにまたここにhttp://docs.jquery.com/Plugins/Autocomplete

を見てみましょう：

を
1. 長いリストの場合は、WebサーバーにAjaxリクエストを行い、最適なオプションを取得します。
2. 短いリストの場合は、すべてのオプションをページにロードして、 gサーバー要求。

提案を表示する方法の実装については、JQueryライブラリをチェックアウトしてください。

Answer 3

ASP.NET用のAJAX Control Toolkitの過去としてエクステンダAutoCompleteがあります。クライアントのキャッシュに設定できるさまざまなオプションがあり、遅延間隔があります。ちょうどそれをWebサービスやページメソッドで指して、離れて行ってください。

Answer 4

チェックcomplete.lyすぎ

http://complete-ly.appspot.com/

それは非常に少ない依存関係と重みを持っていません。

Answer 5

TextBoxValueToDropDownList

function AddNames(text) { 

     if (document.myForm.insertText.value == "") { 
      document.getElementById("insertText").style.border = "1px solid red"; 
      return false; 
     } 
     else { 
      var option = document.createElement("OPTION"); 
      option.text = text.value; 
      option.value = text.value; 
      document.getElementById("dropDownList").options.add(option); 
      document.myForm.insertText.value = ""; 
      document.getElementById("insertText").style.border = "1px solid green"; 
     } 
    } 




    <form name="myForm"> 
     <table> 
      <tr> 
       <td> 
        <input type="text" name="insertText" id="insertText" /></td> 
       <td></td> 
       <td> 
        <select name="dropDown" id="dropDownList"> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="button" value="Insert" id="button" onclick="AddNames(insertText);" /></td> 
      </tr> 
     </table> 
    </form> 

Answer 6

（もちろん小さなデータセットのために）この使用してHTML5を行う1つの方法は、datalistです：より大きなデータセットAJAXが行くには良い方法であるために

<input list="users" name="users"> 
    <datalist id="users"> 
    <option value="Alice"> 
    <option value="Bob"> 
    <option value="Chuck"> 
    <option value="Chris"> 
    <option value="Duke"> 
    <option value="Emily"> 
    </datalist> 

。