Crea una barra de búsqueda oculta con HTML, CSS y JavaScript

Los elementos de GUI interactivos hacen que su aplicación sea más fácil de usar. HTML incluye varios componentes de formulario de forma predeterminada, pero querrá usar CSS para que se ajusten a su diseño. También puede usar JavaScript para ampliar o modificar su comportamiento.

Puede crear dichos componentes utilizando una biblioteca como Tailwind, pero también es útil saber cómo crearlos desde cero.

Descubra cómo crear una barra de búsqueda oculta usando HTML, CSS y JavaScript.

Crear la estructura de contenido con HTML

Aquí está el código HTML para la característica. Tendrá un elemento principal que contiene una entrada y un elemento de botón. También importará secuencias de comandos de fuente impresionante para el icono de búsqueda. En este caso, utilizarás el icono de búsqueda de la lupa.

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8" />
<metahttp-equiv="X-UA-Compatible"contenido="IE=borde" />





instagram viewer

<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0" />
<guionorigen=" https://kit.fontawesome.com/d69fb28507.js"origen cruzado="anónimo">guion>
<título>Barra de búsqueda ocultatítulo>
cabeza>

<cuerpo>
<divisiónclase="padre">
<aporteclase="aporte"tipo="tipo"marcador de posición="Buscar..." />
<botónclase="btn">
<iclase="fa-sólido fa-lupa-lupa">i>
botón>
división>
cuerpo>
html>

Dale estilo a la interfaz usando CSS

En el archivo CSS, debe otorgar al elemento principal la posición de relativo. Una posición relativa permite que los elementos de entrada y botón se muevan alrededor del padre. El Propiedad de posición CSS controla varios tipos de diseño, por lo que es importante entenderlo.

También alineará ambos elementos en el centro para una mejor visibilidad. Pero en su aplicación, puede elegir tener la barra de búsqueda cuando lo desee. Además, dale a ambos elementos el mismo ancho para que se vean del mismo tamaño y ninguno más grande que el otro.

Luego debe darle al padre una clase activa para los elementos de entrada y de botón. De esta forma, se transformará según lo especificado cada vez que el elemento se mueva.

* {
margen: 0;
relleno: 0;
tamaño de caja: cuadro de borde;
}
cuerpo {
color de fondo: #d9d9d9;
altura: 100vh;
mostrar: doblar;
alinear elementos: centro;
justificar-contenido: centro;
}
.padre {
posición: relativo;
}
.aporte {
describir: ninguno;
borde: ninguno;
borde-radio: 100píxeles;
relleno: 5píxeles 10píxeles;
ancho: 40píxeles;
transición: ancho 0.3sfacilidad;
}
.aporte:: marcador de posición {
color: verde;
}
.padre.activo.aporte {
ancho: 200píxeles;
}
.btn {
ancho: 40píxeles;
relleno: 5píxeles 10píxeles;
cursor: puntero;
borde-radio: 100píxeles;
borde: ninguno;
fondo: verde;
mostrar: en línea;
sombra de la caja: 0 0 5píxelesrgb(0, 0, 0, 0.2);
posición: absoluto;
arriba: 0;
izquierda: 0;
transición: transformar 0.3sfacilidad;
}
.padre.activo.btn {
transformar: traducirX(210píxeles);
}
.fa-sólido {
color: #ffffff;
}

Deberías tener un botón de búsqueda así:

Agregar funcionalidad de JavaScript

A continuación, escriba código JavaScript para los elementos. Primero, seleccione los elementos principal, de entrada y de botón usando JavaScript selector de consulta() método.

Luego, agregue un detector de eventos de clic al botón. Entonces, cuando se hace clic, el botón cambia según la clase seleccionada. Añade el enfocar() método para establecer el foco en el elemento especificado. Comienza a parpadear cada vez que se expande la barra de búsqueda.

dejar entrada = documento.querySelector(".aporte");
dejar botón = documento.querySelector(".btn");
dejar padre = documento.querySelector(".padre");
btn.addEventListener("hacer clic", () => {
 parent.classList.toggle("activo");
 entrada.focus();
});

Si hace clic en el botón, se abre la barra de búsqueda y viceversa. Aparece como se muestra en el siguiente diagrama:

Ahora, si escribe información y hace clic en el botón, se cierra mientras el sistema busca la información.

Genial, ¿no? Puedes ver este código y jugar con la barra de búsqueda en codepen.io. Puede personalizar aún más la barra de búsqueda creando un lista de la barra de búsqueda de artículos Esto facilita que sus usuarios realicen búsquedas en la aplicación.

Otras características que puede crear

Como principiante en el desarrollo web, hay muchas funciones que puede crear con HTML, CSS y JavaScript. Puede crear una ventana emergente/modal, un control deslizante de imagen, un actualizador automático de pie de página y mucho más.

Tales proyectos creativos son excelentes para aprender conceptos de programación. Puedes aplicar habilidades a medida que las aprendes, lo que aumenta la utilidad de la habilidad. Además, puede crear excelentes interfaces de usuario que usted y sus usuarios disfrutarán. Utilice esta guía para crear una barra de búsqueda oculta y otras funciones interactivas para su sitio.