Un estilo de interfaz de usuario común para Apple y WordPress ha sido el campo de búsqueda en expansión. Cuando un usuario hace clic para enfocar, el campo se ampliará y luego se contraerá cuando el usuario desenfoca. Esta técnica se ha vuelto popular porque ahorra espacio en su página cuando no se utiliza la búsqueda. Pero también destaca el campo de búsqueda cuando es en uso, lo que capta la atención del usuario y le permite saber que el sitio web está respondiendo.
En este tutorial quiero demostrar dos métodos diferentes para construir un campo de búsqueda en expansión. El primero es usar transiciones básicas de CSS3 que solo son compatibles con los navegadores web más nuevos. Esto funciona muy bien para diseños simples, pero no hay forma de verificar si el usuario ha ingresado datos estrictamente a través de CSS. En el segundo campo usaremos JavaScript para expandir, y luego solo retrocederemos si el usuario no ha ingresado ningún texto. Es una pieza pequeña pero fascinante de la interfaz de usuario que puede integrarse perfectamente en cualquier proyecto de sitio web.
Demo en vivo - Descargar código fuente
Construyendo una forma simple
No quiero que los formularios de demostración envíen nada, así que estoy usando JavaScript para detener el evento de envío. Pero el HTML simple del documento sigue siendo normal y bastante sencillo. Siéntase libre de descargar una copia de mi demostración si desea trabajar en una copia local del tutorial.
Este fragmento contiene todos los códigos de encabezado que necesitamos en la página HTML. He incluido una copia de la biblioteca jQuery para una secuencia de comandos más rápida. Mi JavaScript personalizado se guarda en un archivo externo llamado jsinput.js. No contiene nada demasiado complejo, pero valdrá la pena entender cómo completamos los diferentes efectos a través de CSS y JS. Aquí están las dos áreas de entrada de formulario con sus códigos HTML exactos:
Los campos de búsqueda se nombran #s y # s2 respectivamente. Mantuve una convención de nomenclatura similar con los elementos de formulario y los botones de envío. Leer el documento CSS debería ser mucho más fácil, ya que tenemos los campos divididos por nombres de ID únicos. Pero primero podemos ver las transiciones de CSS y luego pasar al campo dinámico de JavaScript.
Expandiendo con las transiciones de CSS
Mi archivo CSS de demostración contiene una serie de restablecimientos junto con estilos básicos para crear la estructura de diseño. No hay nada fuera de lo común si está familiarizado con CSS. Sin embargo, creo que vale la pena mencionar que un bloque en realidad apunta al texto del marcador de posición para varios elementos de entrada. Estos selectores no son compatibles con todos los navegadores, pero podemos obtener la mayoría de los motores más nuevos con estos códigos:
Se ve mucho mejor mezclar el texto de entrada típico con el resto de su diseño. Las propiedades CSS de cada campo de búsqueda imitan un tono similar. Tengo una clase envoltura externa llamada .contenedor que encapsula la forma al 100% de ancho. Esto significa que el formulario nunca se expandirá más allá del contenedor de la página, por lo que podemos usar el 100% como máximo y cualquier otra cosa será relativa.
Las propiedades de transición se pueden encontrar en la parte inferior de la .campo de búsqueda clase. La propiedad CSS3 común y los prefijos de proveedores deben cubrir la mayoría de los navegadores web. Pero si necesita soporte para la compatibilidad con versiones anteriores, utilizar un método de JavaScript estricto generará mejores resultados. Aunque es cierto que este código es mucho más limpio y fácil de organizar.
Un último bit para el área de entrada de búsqueda fijará la ubicación de nuestro icono de búsqueda. Esto debe colocarse al final del campo de entrada, que también incluye un poco de relleno en el lado derecho. De esta manera, el usuario nunca puede ingresar texto que escribe sobre el ícono del botón de búsqueda. La fuente original de este gráfico es de Icon Finder, diseñado por Brightmix. El conjunto de iconos planos es perfecto para una entrada de campo de búsqueda tan básica.
El mayor problema con la animación solo en CSS es el manejo de las selecciones dinámicas de los usuarios. Cuando un visitante ingresa texto en el campo expandido, puede presionar entrar o hacer clic en la lupa. Si hacen clic para buscar, esto eliminará el enfoque de la entrada y se reducirá de nuevo al 45%, lo que también afecta al evento clic. Puede elegir editar las propiedades de transición y fijarlas en el :atención estado. Pero entonces no habrá ninguna animación cuando se reduzca el tamaño, por lo que el efecto es aún peor.
Manejo de entrada dinámica a través de jQuery
En mi ejemplo de demostración, el segundo campo de entrada es el único dirigido por jQuery. En la cima de jsinput.js He creado dos variables que seleccionan el segundo campo de entrada y el botón de búsqueda. Es posible cambiar estas posiciones si prefieres apuntar al primer campo. Pero entonces también puede valer la pena eliminar las transiciones de CSS3 y usarlas solo como un método alternativo cuando JS está deshabilitado en el navegador.
He dividido el archivo en dos grandes trozos de código. Esta primera mitad contiene las variables iniciales junto con el controlador de eventos de enfoque. Cuando el usuario se enfoca en el segundo campo de entrada, necesitamos expandir el ancho al 100%. También necesitamos mover el ícono de búsqueda desde su posición predeterminada hasta el lado derecho. Los dos métodos jQuery.animate () deben ejecutarse exactamente al mismo tiempo, produciendo un efecto de animación muy similar al de las transiciones CSS3.
Entonces esta última parte tiene dos eventos más para enlazar. Lo primero ocurre después de que el usuario borra el segundo campo de entrada. El script probará contra search2.val () y determinar si el usuario ha ingresado algún dato. Si el campo está vacío, entonces volvemos a animar hasta un 45% de ancho, y el icono también se reposiciona. De lo contrario, el usuario ha ingresado algunos términos de búsqueda y lo dejamos en un ancho total del 100%.
El segundo bloque pequeño de códigos se activará una vez que intente enviar datos para cualquiera de los formularios. Atrapará automáticamente el envío y evitará que suceda con event.preventDefault (). En general, no debería ser un script complejo, pero los desarrolladores que no están familiarizados con jQuery pueden necesitar investigar un par de funciones. Los códigos son excepcionalmente pequeños y deberían funcionar en todos los navegadores web habilitados para JS.
Demo en vivo - Descargar código fuente
Conclusión
Esta interfaz no requiere mucha planificación o código adicional en su diseño. E incluso si mantiene el mismo estilo de diseño para los campos de entrada de su sitio web, esta técnica se puede hacer usando unas pocas transiciones CSS3 junto con un contenedor externo.
También sería posible incluir esto en cualquier número de formularios similares, como campos de contacto o páginas de configuración de perfil. Descargue una copia de mi código fuente de demostración y siéntase libre de implementar esta función en cualquier número de proyectos.