Los usuarios esperan inmediatez. Un buscador que requiere recargar la página se siente obsoleto en 2026.

Solución Rápida (Code Snippet)

Aquí tienes la implementación completa: el frontend dinámico y el backend seguro.

Frontend (HTML + JS)

<input type="text" id="searchInput" class="form-control" placeholder="Buscar productos...">
<div id="results"></div>

<script>
const searchInput = document.getElementById('searchInput');
const resultsDiv = document.getElementById('results');

searchInput.addEventListener('input', async () => {
    const query = searchInput.value;
    if (query.length < 2) { resultsDiv.innerHTML = ''; return; }

    const response = await fetch(`search.php?q=${encodeURIComponent(query)}`);
    const data = await response.json();

    resultsDiv.innerHTML = data.map(item => `
        <div class="card mb-2">
            <div class="card-body">${item.nombre}</div>
        </div>
    `).join('');
});
</script>

Backend (search.php)

<?php
header('Content-Type: application/json');
require 'db.php'; // Tu conexión PDO

$q = $_GET['q'] ?? '';
$stmt = $pdo->prepare("SELECT nombre FROM productos WHERE nombre LIKE ? LIMIT 5");
$stmt->execute(["%$q%"]);
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Cómo funciona

  1. Evento input: Se dispara cada vez que el usuario presiona una tecla. Es más rápido y fluido que change.
  2. Fetch API: Realiza una petición GET asíncrona al servidor. Usamos encodeURIComponent para que caracteres especiales no rompan la URL.
  3. SQL LIKE: El operador % permite buscar coincidencias en cualquier parte del texto.
  4. JSON: PHP devuelve los datos estructurados, que JavaScript convierte en HTML dinámicamente.

Tips de Rendimiento

  • Debounce: Para no saturar el servidor con cada tecla, puedes esperar 300ms antes de disparar el Fetch.
  • Limit: Siempre limita tus resultados (ej. LIMIT 5) para que la respuesta sea instantánea.

Enlaces Internos

Preguntas Frecuentes

¿Es seguro contra inyecciones SQL?

Sí, siempre y cuando uses Sentencias Preparadas (PDO) como en el ejemplo.

¿Puedo buscar en múltiples columnas?

Claro, puedes modificar tu SQL: WHERE nombre LIKE ? OR descripcion LIKE ?.