Cómo crear una barra de búsqueda con icono interactivo

/* Estilos generales para la barra de búsqueda */
.barra-busqueda {
position: relative;
width: 350px; /* Ajusta el ancho según tus necesidades */
margin: 50px auto; /* Centrado en la página */
font-family: Arial, sans-serif;
}

/* Contenedor del icono de búsqueda */
.icono-busqueda {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}

/* Efecto visual al pasar el cursor sobre el icono */
.icono-busqueda:hover {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
}

/* Icono (puede ser un SVG o una fuente de iconos) */
.icono-busqueda svg {
width: 20px;
height: 20px;
fill: #333;
}

/* Contenedor del cuadro de búsqueda */
.cuadro-busqueda {
display: none; /* Inicialmente oculto */
position: absolute;
top: 50%;
right: 50px;
transform: translateY(-50%);
background-color: #fff;
border: 1px solid #ccc;
padding: 8px 10px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
z-index: 1000;
width: 250px;
box-sizing: border-box;
transition: opacity 0.3s ease;
}

/* Mostrar el cuadro de búsqueda cuando está activo */
.cuadro-busqueda.activo {
display: flex;
align-items: center;
opacity: 1;
}

/* Campo de entrada de texto */
.cuadro-busqueda input[type=»text»] {
flex: 1;
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}

/* Cambiar el borde al enfocar */
.cuadro-busqueda input[type=»text»]:focus {
border-color: #007bff;
}

/* Botón de búsqueda */
.cuadro-busqueda button {
margin-left: 8px;
padding: 6px 12px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}

/* Efecto hover en el botón */
.cuadro-busqueda button:hover {
background-color: #0056b3;
}

/* Adaptación para pantallas pequeñas */
@media(max-width: 400px) {
.barra-busqueda {
width: 90%;
}

.cuadro-busqueda {
width: 200px;
right: 10px;
}
}

// Obtener elementos del DOM
const iconoBusqueda = document.getElementById(‘iconoBusqueda’);
const cuadroBusqueda = document.getElementById(‘cuadroBusqueda’);
const textoBusqueda = document.getElementById(‘textoBusqueda’);

// Función para mostrar u ocultar el cuadro de búsqueda
function toggleBusqueda() {
if (cuadroBusqueda.classList.contains(‘activo’)) {
cuadroBusqueda.classList.remove(‘activo’);
cuadroBusqueda.setAttribute(‘aria-hidden’, ‘true’);
} else {
cuadroBusqueda.classList.add(‘activo’);
cuadroBusqueda.setAttribute(‘aria-hidden’, ‘false’);
textoBusqueda.focus(); // poner foco en el input cuando se muestra
}
}

// Evento clic en el icono
iconoBusqueda.addEventListener(‘click’, toggleBusqueda);

// También permitimos activar con la tecla Enter o Espacio
iconoBusqueda.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Enter’ || e.key === ‘ ‘) {
e.preventDefault();
toggleBusqueda();
}
});

// Opcional: cerrar la búsqueda al hacer clic fuera
document.addEventListener(‘click’, function(e) {
if (!document.getElementById(‘barraBusqueda’).contains(e.target)) {
if (cuadroBusqueda.classList.contains(‘activo’)) {
cuadroBusqueda.classList.remove(‘activo’);
cuadroBusqueda.setAttribute(‘aria-hidden’, ‘true’);
}
}
});

// Función para gestionar la acción del botón de búsqueda
document.getElementById(‘botonBuscar’).addEventListener(‘click’, function() {
const query = textoBusqueda.value.trim();
if (query !== ») {
// Aquí puedes definir qué hacer con la búsqueda
alert(`Buscando: ${query}`);
// En una implementación real, realizarías una llamada AJAX o redireccionarías
} else {
alert(‘Por favor, ingresa un término de búsqueda.’);
textoBusqueda.focus();
}
});

// También puedes gestionar el evento de presionar Enter en el input
textoBusqueda.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Enter’) {
e.preventDefault();
document.getElementById(‘botonBuscar’).click();
}
});