Casella di testo con suggerimenti a discesa

Question

Attualmente dispongo di un elenco a discesa di databound sul mio sito Web ASP.Net C# 2.0 che contiene circa 400 elementi. Voglio sostituirlo con qualcosa di simile alla casella di testo in Google Search dove inserisci la lettera e solo le voci che iniziano con quelle lettere compaiono

qual è un buon modo di implementarlo? Ci sono controlli che esistono già che qualcuno può suggerire?

Answer 1

Date un'occhiata a http://docs.jquery.com/Plugins/Autocomplete

Anche qui è un tutorial per l'uso con ASP.Net

Answer 2

Se questi sono conosciuti enrties, è possibile utilizzare JQuery, e l'evento OnUpdate:

1. se è una lunga lista, fai Ajax Request al tuo webserver, recupera l'opzione migliore
2. se è un breve elenco, puoi caricare tutte le opzioni sulla pagina e offrire i testi opzionali senza fare g una richiesta del server.

Verificare la libreria JQuery per implementazioni su come visualizzare il suggerimento.

Answer 3

C'è un extender AutoComplete come passato di AJAX Control Toolkit per ASP.NET. Esistono numerose opzioni che è possibile impostare per la memorizzazione nella cache del client, intervallo di ritardo. Basta puntarlo su un servizio web o un metodo di pagina e via. Anche

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

Answer 4

controllo complete.ly non ha dipendenze e pesi molto poco.

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

Un modo per farlo utilizzando HTML5 (per i piccoli insiemi di dati naturalmente) è datalist:

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

Per i set di dati più grandi AJAX è un modo migliore per andare.