Cuadro de texto con sugerencias desplegables

Question

Actualmente tengo una lista desplegable de datos en mi sitio web ASP.Net C# 2.0 que tiene alrededor de 400 elementos. Quiero reemplazarlo con algo similar como el cuadro de texto en la búsqueda de google donde ingresas una letra y solo las entradas que comienzan con esas letras aparecen

¿Cuál es una buena forma de implementarlo? ¿Existen controles que ya existen y que cualquiera puede sugerir?

Answer 1

Tome un vistazo a http://docs.jquery.com/Plugins/Autocomplete

También aquí es una tutorial para su uso con ASP.Net

Answer 2

Si estos son conocidos enrties, puede utilizar jQuery, y en el caso OnUpdate:

1. si es una lista larga, haga la solicitud Ajax a su servidor web, obtenga la mejor opción
2. si es una lista corta, puede cargar todas las opciones en la página y ofrecer los textos opcionales sin makin g una solicitud de servidor.

Consulte la biblioteca de JQuery para ver las implementaciones sobre cómo mostrar la sugerencia.

Answer 3

Existe un extensor AutoComplete como el pasado del AJAX Control Toolkit para ASP.NET. Hay muchas opciones diferentes que puede configurar para el almacenamiento en caché del cliente, intervalo de retraso. Simplemente apúntalo a un servicio web o método de página y listo.

Answer 4

cheque complete.ly demasiado

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

que no tiene dependencias y pesos muy pequeños.

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

Una forma de hacer esto utilizando HTML5 (para pequeños conjuntos de datos, por supuesto) es 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> 

Para grandes conjuntos de datos AJAX es un mejor camino a seguir.