Una búsqueda rápida en Google proporcionará muchos complementos de autocompletado útiles, incluso hay una opción compartida por jQuery UI que viene incluida con la biblioteca. Sin embargo hoy quiero buscar una solución alternativa. El complemento jQuery Autocomplete lanzado por DevBridge tiene la funcionalidad exacta que me parece más atractiva.
Los estilos resaltarán automáticamente las palabras mientras escribe, y los resultados aparecerán en el menú desplegable en la parte inferior. Este tutorial es una breve introducción al uso del complemento mediante la carga de contenido de una matriz de JavaScript. Es posible cargar contenido Ajax desde un archivo de fondo o desde contenido de la base de datos, sin embargo, para este tutorial es más fácil trabajar con datos locales. Vea mi ejemplo de demostración para tener una idea de lo que estamos tratando de construir.
Demo en vivo - Descargar código fuente
Creando la pagina
Un buen primer paso es descargar una copia del complemento jQuery Autocompletar. Estoy usando la versión minificada dentro de mi encabezado, junto con una copia de la última secuencia de comandos jQuery. Como mantengo todas las sugerencias dentro de una matriz de JavaScript, también he movido los scripts personalizados a otro archivo separado.
Los recursos no son demasiado difíciles de configurar. Y de manera similar, todo el HTML es muy sencillo, por lo que puede implementar cualquier tipo de diseño de búsqueda en su página y debería funcionar bien. Estoy usando un contenedor externo con el ID #campo de búsqueda Para centrar toda la forma. No hay un botón de envío para esta demostración, sin embargo, los resultados aparecerán automáticamente en el campo de contexto dinámico debajo de la entrada.
Podemos apuntar al campo usando una ID de #autocompletar. No hay HTML adicional porque todas las sugerencias se presentarán utilizando códigos JS. Otra área interesante es el párrafo que usa una identificación de #outputcontent. Aquí es donde podemos mostrar la elección del usuario una vez que hacen clic en una sugerencia. Normalmente, en un sitio web en vivo, en lugar de eso simplemente redirigiría al usuario a una página de búsqueda o a la página principal.
Diseñando con CSS
No quiero profundizar demasiado en los detalles, pero deberíamos mirar los estilos CSS para cada una de las funciones de sugerencia, junto con el área de entrada principal. El borde de la caja exterior y los estilos de contenido se desarrollan en gran medida alrededor de la barra de búsqueda de Design Shack. Cada uno de los estilos de sugerencias se basa en el código predeterminado, que he copiado en mi hoja de estilos.
Si desea mantenerlos en una hoja de estilo separada, todavía se cargaría bien. Sin embargo, trato de combinar recursos para que podamos reducir las solicitudes HTTP desde el navegador. Las dos primeras clases están dirigidas a la ventana emergente de sugerencias completa, junto con cada fila de sugerencias internas. Puede aplicarles un estilo que se ajuste a su sitio web. Además, el CSS viene junto con una clase de entidad seleccionada para resaltar el texto que ya ha sido escrito por el usuario.
El campo de búsqueda en sí no debería ser un problema, independientemente de su propio diseño. jQuery Autocomplete está diseñado para trabajar alrededor de cualquier ancho para que todas las sugerencias puedan encajar perfectamente en el mismo diseño. Concedido, mi ejemplo ocupa mucho espacio en la página, pero el complemento lo maneja perfectamente sin muchas personalizaciones.
Implementar el autocompletado
Si está utilizando una llamada Ajax de back-end para obtener resultados de datos, es posible que deba realizar su propia función de búsqueda. jQuery Autocomplete espera algún tipo de datos de respuesta como XML / JSON y esto debe devolverse desde PHP, Rails, Python, ASP.NET, etc. publicaciones y sus URL, luego devuelva esta lista a su navegador.
Lo que he hecho es crear una serie de entradas dentro de JavaScript para las principales monedas que se encuentran en todo el mundo. Cuando comience a escribir el país o el nombre de la moneda, verá una lista de elementos sugeridos extraídos directamente de la matriz. La entrada manual de datos lleva mucho tiempo, por lo que solo copiaré una pequeña parte de la matriz para demostrar cómo se hace.
Todo este contenido debe agregarse antes de ejecutar su propia función dentro de jQuery. He elegido mantener la matriz y la llamada de función personalizada almacenados dentro del mismo archivo JS. Sin embargo, puede elegir separar las funciones de los datos y moverlas a archivos diferentes por completo. Ahora el complemento de autocompletado solo requiere una pequeña cantidad de código predeterminado.Copiaré una plantilla de muestra junto con mi código de demostración en vivo para que pueda ver lo que he hecho usando los mismos parámetros.
los buscar el parámetro solo se utiliza para datos locales cuando estamos dirigidos a una matriz. onSeleccionar activará una nueva función cada vez que el usuario seleccione una sugerencia. En mi demostración en vivo, simplemente creamos una nueva cadena de HTML para generar el nombre seleccionado y el valor de esa entrada. Pero tenga en cuenta que mi demo es un ejemplo muy claro de lo que es posible.
Consulte la documentación de jQuery Autocomplete para tener una mejor idea de algunos otros parámetros. Ni siquiera he empezado a rascar la superficie y es probable que los desarrolladores de JavaScript puedan armar ejemplos utilizando muchos otros parámetros en la llamada a la función. Pero quiero mostrar lo fácil que es tener este complemento en funcionamiento en su sitio web, incluso utilizando datos estáticos cuando sea necesario.
Demo en vivo - Descargar código fuente
Pensamientos finales
Si nunca ha jugado con el uso de sugerencias de autocompletado, debo recomendar este complemento. He usado algunas soluciones diferentes en el pasado, pero nada me ha destacado realmente hasta ahora. Y hay una gran diferencia entre la carga de sugerencias con los resultados de la página frente a los resultados de búsqueda (como Google Instant).
Antes de usar este complemento, asegúrese de tener un buen plan para construir una interfaz de usuario que funcione bien. ¡El complemento jQuery Autocomplete junto con todos mis códigos fuente se liberan de forma gratuita bajo la licencia MIT, por lo que está abierto a usar esto para cualquier proyecto!