search-components
intermediate
search
autocomplete
animation
input
ux
Categoría · Componentes de Búsqueda Nivel de Dificultad · Intermedio Publicado el · 22 de agosto de 2025

Caja de Búsqueda Animada

Caja de búsqueda moderna con sugerencias de autocompletado, animaciones suaves y diseño responsivo, perfecta para la funcionalidad de búsqueda en sitios web.

#search #autocomplete #animation #input #ux

Diseño Responsivo

Soporte para Modo Oscuro

No

líneas

629

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

250px

Resumen

Caja de búsqueda moderna con sugerencias de autocompletado, animaciones suaves y diseño responsivo, perfecta para la funcionalidad de búsqueda en sitios web.

Cómo usarlo

  1. Copia el marcado HTML en tu página.
  2. Pega el CSS en tu hoja de estilos y verifica que los selectores coincidan con el HTML.
  3. Pega el JavaScript y cárgalo después del HTML.
  4. Ajusta espaciados, colores y textos para tu sistema de diseño.

Consejos de personalización

  • Renombra las clases para evitar conflictos con tu CSS existente.
  • Reemplaza colores fijos por variables CSS para facilitar el tema.
  • Comprueba el diseño en 320px, 768px y 1024px.

HTML

47

líneas

CSS

363

líneas

JavaScript

219

líneas


                <div class="search-box-container">
  <div class="search-box-demo">
    <div class="search-header">
      <h2>Busca en Nuestro Sitio</h2>
      <p>Encuentra lo que buscas rápidamente</p>
    </div>
    
    <div class="search-wrapper" id="searchWrapper">
      <div class="search-box" id="searchBox">
        <div class="search-icon">🔍</div>
        <input type="text" class="search-input" id="searchInput" placeholder="Buscar productos, artículos o temas...">
        <button class="clear-btn" id="clearBtn">×</button>
        <button class="search-btn" id="searchBtn">Buscar</button>
      </div>
      
      <div class="suggestions-dropdown" id="suggestionsDropdown">
        <div class="suggestion-group">
          <div class="group-title">Búsquedas Populares</div>
          <div class="suggestion-item" data-value="audífonos inalámbricos">
            <span class="suggestion-icon">🎧</span>
            <span class="suggestion-text">Audífonos Inalámbricos</span>
          </div>
          <div class="suggestion-item" data-value="teléfono inteligente">
            <span class="suggestion-icon">📱</span>
            <span class="suggestion-text">Teléfono Inteligente</span>
          </div>
          <div class="suggestion-item" data-value="computadora portátil">
            <span class="suggestion-icon">💻</span>
            <span class="suggestion-text">Computadora Portátil</span>
          </div>
        </div>
        
        <div class="suggestion-group">
          <div class="group-title">Búsquedas Recientes</div>
          <div class="suggestion-item" data-value="altavoz bluetooth">
            <span class="suggestion-icon">🔊</span>
            <span class="suggestion-text">Altavoz Bluetooth</span>
          </div>
          <div class="suggestion-item" data-value="reloj inteligente">
            <span class="suggestion-icon">⌚</span>
            <span class="suggestion-text">Reloj Inteligente</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

              
47líneas
2007caracteres
HTMLIdioma

Compatibilidad del Navegador

Chrome

>= 50

Firefox

>= 45

Safari

>= 10

Edge

>= 15

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas ->