Soy yo o esta serie de tutoriales de "Hazlo fácil" se está convirtiendo en el sello de la casa. Pero, ¿Y no es, al fin y al cabo, lo que muchas veces buscamos al momento de escribir código?, es decir ¿Cuál es la manera más fácil de codificar ese requerimiento? o ¿Cuál tecnología me puede ayudar a implementarlo de una manera simple, elegante y eficaz? Pues bueno, hoy le toca el turno a uno de los frameworks front-end más populares de la actualidad: jQuery, y la tarea a realizar será: un campo de texto autocomplete.
Pues bueno, dejando las formalidades a un lado, empecemos. Primero el html donde visualizaremos nuestro proyectito.
A continuación importamos las librerías necesarias:
Ahora empezamos a codificar, para este ejemplo utilizaré una lista que contiene distintos lenguajes de programación:
Con esto ya tendremos la lista con la información que se mostrará al momento de teclear en el campo de texto. Ahora veamos como enlazarlo al nuestro control.
Para ello usaremos la función autocomplete de jquery, la cuál acepta 3 parámetros:
-source: es la fuente de los datos a mostrar, en nuestro caso, la lista de lenguajes,
-minLenght: es la longitud mínima de caracteres que tendremos que introducir para que se desplieguen los resultados.
-delay: el tiempo de respuesta entre el momento en que dejamos de introducir texto y la petición, mientras menos tiempo, más rápido reaccionará nuestro autocomplete.
Y listo, eso es todo. Pueden probar el autocomplete aquí mismo.
Hasta la próxima. Saludos ;)
No hay comentarios.:
Publicar un comentario