Web Tutoriales

Barra de búsqueda responsive

Implementación de una barra de búsqueda adaptable para escritorio y móvil.

barra-busqueda-responsive

Vamos a ver cómo implementar una barra de búsqueda responsive con HTML, CSS y JavaScript, optimizada para diferentes tamaños de pantalla. El diseño se adapta de forma automática, ofreciendo una experiencia visual y de uso coherente tanto en escritorio como en móviles.

Comenzamos con una estructura HTML básica. Tenemos un contenedor que agrupa el botón de activación y los formularios de búsqueda para cada contexto, uno para el escritorio y otro para el móvil:

  <div class="search-container" id="search-container">
    <button class="search-toggle-button" id="search-toggle" aria-label="Open search bar">
      <svg viewBox="0 0 24 24" width="24" height="24" role="presentation">
        <path
          d="M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z">
        </path>
      </svg>
    </button>


    <form action="/search" method="get" class="search-form search-form--desktop" id="search-form-desktop" role="search">
      <div class="search-input-container">
        <input type="text" name="q" class="search-input" placeholder="Search the blog…" aria-label="Search the blog">
        <button type="submit" class="search-submit-button" aria-label="Submit search">
          <svg viewBox="0 0 24 24" width="20" height="20" role="presentation">
            <path
              d="M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z">
            </path>
          </svg>
        </button>
      </div>
    </form>


    <form action="/search" method="get" class="search-form search-form--mobile" id="search-form-mobile" role="search">
      <div class="search-input-container">
        <span class="search-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="20" height="20" role="presentation">
            <path
              d="M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z">
            </path>
          </svg>
        </span>
        <input type="text" name="q" class="search-input" placeholder="Search the blog…" aria-label="Search the blog">
      </div>
      <button type="submit" class="search-action-button">
        Search
      </button>
    </form>
  </div>

Cada formulario está diseñado con clases específicas para mostrarse o ocultarse según el tamaño de pantalla.

Diseño CSS

Usamos media queries para mostrar u ocultar los formularios dependiendo del ancho de la ventana. El formulario de escritorio (.search-form--desktop) se muestra solo en pantallas mayores a 768px, mientras que el formulario móvil (.search-form--mobile) se activa en pantallas más pequeñas.

Además, se definen variables CSS que centralizan los colores, radios, padding y transiciones, lo que facilita mantener una consistencia visual sin repetir valores.

Ejemplo del comportamiento móvil:

@media (max-width: 768px) {
  .search-form--desktop {
    display: none !important;
  }


  .search-container.search-active .search-form--mobile {
    display: flex;
    animation-name: slideDown;
  }


  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

El input de búsqueda tiene un estilo limpio y accesible, con contorno al enfocarse, lo cual mejora la interacción con teclado.

Interacción con JavaScript

El comportamiento interactivo está gestionado con JavaScript. Al pulsar el botón de búsqueda, se alterna el estado visible del formulario correspondiente. Además, se cierra automáticamente si se hace clic fuera del contenedor o si cambia el tamaño de la ventana, para evitar estados visuales inconsistentes.

searchToggle.addEventListener('click', (event) => {
  event.stopPropagation();
  searchContainer.classList.toggle('search-active');


  if (searchContainer.classList.contains('search-active')) {
    setTimeout(() => {
      const activeForm = window.innerWidth >= 768 ? desktopInput : mobileInput;
      activeForm.focus();
    }, 50);
  }
});

También se gestionan clics en el documento para cerrar la búsqueda si no se interactúa directamente con el componente, algo especialmente útil en interfaces móviles.

Resultado final

Consideraciones finales

Esta implementación ofrece una solución práctica que puede integrarse sin dependencias externas. A diferencia de otros componentes más pesados o que requieren frameworks, el código es directo y adaptable a distintas necesidades. Puede personalizarse fácilmente para distintos estilos visuales o flujos de búsqueda según el proyecto.

Nos enfocamos en lograr una estructura clara, un diseño adaptable y una interacción mínima pero efectiva. El resultado es un componente reutilizable que mejora la accesibilidad y la experiencia de navegación.