autocomplete - tagify - Cuadro de texto con sugerencias desplegables

tagit

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 aparecen las entradas que comienzan con esas letras

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

Answer 1

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

También aquí hay un tutorial para usar con ASP.Net

Answer 2

Existe un extensor Autocompletar 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 3

Si se trata de aplicaciones conocidas, puede usar JQuery y en el evento OnUpdate:

1. si es una lista larga, haga la solicitud Ajax a su servidor web, recupere 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 realizar una solicitud al servidor.

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

Answer 4

verificar complete.ly también

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

no tiene dependencias y pesa muy 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

Una forma de hacerlo 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 conjuntos de datos más grandes, AJAX es una mejor forma de hacerlo.