Buscador interno con AJAX optimizado para velocidad

Cómo añadir un buscador interno con AJAX en Blogger

En esta guía te enseño a instalar y configurar el buscador interno con AJAX que hemos integrado en la plantilla NichoClean v2.0 para Blogger. Este plugin convierte la búsqueda tradicional de Blogger en un sistema moderno: más rápido, minimalista y optimizado para SEO.

¿Qué es el buscador interno con AJAX?

El buscador interno de NichoClean es un plugin para Blogger que muestra los resultados en tiempo real, sin recargar la página. Gracias a su diseño responsive y ligero, se adapta tanto a móviles como a escritorio y mejora la experiencia de los lectores.

Ventajas principales

🔍 Resultados instantáneos con AJAX.
⚡ Optimizado para velocidad y SEO.
📱 Diseño minimalista y responsive.
🛠 Configuración simple desde un gadget HTML.
📊 Aumenta las páginas vistas y la retención de usuarios.

Configuración del buscador (Gadget HTML)

Lo primero es crear un gadget de configuración. Este bloque invisible le dice al plugin cómo debe comportarse. Solo necesitas añadirlo una vez en el Layout o en la plantilla.

<!-- Configuración Buscador Ajax -->
<div id="config-search" hidden
     data-max-results="10"
     data-min-chars="3"
     data-delay="500">
</div>

<!-- Opciones disponibles:
  - data-max-results: Máximo de resultados a mostrar (default: 10).
  - data-min-chars: Caracteres mínimos antes de iniciar la búsqueda (default: 3).
  - data-delay: Retraso en ms tras dejar de escribir antes de buscar (default: 500).
  -->

¿Qué significa cada parámetro?

data-max-results: cuántos resultados mostrar (ej: 5, 10, 15).
data-min-chars: número mínimo de letras que debe escribir el usuario antes de que inicie la búsqueda.
data-delay: tiempo en milisegundos que espera antes de lanzar la búsqueda (para no saturar la API).

Dónde colocar el gadget

Ve a Blogger → Diseño (Layout).
Añade un gadget tipo HTML/JavaScript.
Pega el bloque anterior y guarda.
Recomendado: ponlo en el footer o al final de la plantilla (antes de </body>).

HTML del buscador (marcador)

Este es el formulario de búsqueda que verá el usuario. Puedes colocarlo en el header, en la sidebar, en una página estática llamada “Buscar” o incluso dentro de un post.

<div class="post-header">
  <form class="search-box" id="ajax-search-form" action="/search" method="get">
    <input type="text" id="ajax-search-input" name="q" placeholder="Buscar..." aria-label="Buscar" required>
    <button type="submit" aria-label="Buscar">🔍</button>
  </form>
</div>

<!-- Contenedor de resultados dinámicos -->
<div id="search-results"></div>

Importante: No pongas más de un buscador en la misma página, ya que este plugin usa IDs fijos.

Ejemplo del Buscador Ajax en Blogger

Este es un ejemplo práctico del buscador Ajax para Blogger, totalmente configurable mediante gadget HTML. El buscador funciona en tiempo real mostrando resultados al instante y mantiene compatibilidad SEO con el buscador clásico.

🔥 Demo en vivo

Script del buscador

El siguiente código es el corazón del plugin de búsqueda en Blogger. Debes pegarlo en tu plantilla, justo antes del cierre </body>.

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", () => {
  const config = document.getElementById("config-search");
  if (!config) {
    console.warn("Falta el gadget de configuración del Buscador Ajax. Se usan valores por defecto.");
  }

  // --- Schema con defaults ---
  const schema = {
    maxResults: { type: "number", default: 10 },
    minChars: { type: "number", default: 3 },
    delay: { type: "number", default: 500 }
  };

  // --- Función para leer config con validación ---
  function getConfigValue(attr, schema) {
    let value = config ? config.dataset[attr] : undefined;
    let parsed = schema.type === "number" ? parseInt(value, 10) : value;
    return (!isNaN(parsed) && parsed > 0) ? parsed : schema.default;
  }

  const MAX_RESULTS = getConfigValue("maxResults", schema.maxResults);
  const MIN_CHARS   = getConfigValue("minChars", schema.minChars);
  const DELAY       = getConfigValue("delay", schema.delay);

  // --- Elementos del DOM ---
  const searchInput = document.getElementById("ajax-search-input");
  const searchForm = document.getElementById("ajax-search-form");
  const resultsContainer = document.getElementById("search-results");
  if (!searchInput || !searchForm || !resultsContainer) return;

  let searchTimeout;

  // --- Búsqueda Ajax ---
  searchInput.addEventListener("input", function () {
    clearTimeout(searchTimeout);
    let query = this.value.trim();

    if (query.length < MIN_CHARS) {
      resultsContainer.innerHTML = `<p>Escribe al menos ${MIN_CHARS} caracteres...</p>`;
      return;
    }

    searchTimeout = setTimeout(() => {
      resultsContainer.innerHTML = "<p>Buscando...</p>";
      let url = `/feeds/posts/summary?alt=json&q=${encodeURIComponent(query)}&max-results=500`;

      fetchWithCacheManager(url) // usa la duración del gadget #config-cache
        .then(data => {
          let entries = (data.feed && data.feed.entry) || [];
          if (entries.length === 0) {
            resultsContainer.innerHTML = "<p>No se encontraron resultados.</p>";
            return;
          }

          // Limitar resultados
          const mostrar = entries.slice(0, MAX_RESULTS);
          let html = "<ul class='search-result-list'>";
          mostrar.forEach(entry => {
            let title = entry.title.$t;
            let link = entry.link.find(l => l.rel === "alternate").href;
            let snippet = entry.summary ? entry.summary.$t.substring(0, 120) + "..." : "";
            html += `
              <li class="search-result-item">
                <a href="${link}" target="_blank">${title}</a>
                <p>${snippet}</p>
              </li>`;
          });

          if (entries.length > MAX_RESULTS) {
            html += `<li class="search-result-item more-results">
                       <a href="/search?q=${encodeURIComponent(query)}">
                         Ver todos los resultados →
                       </a>
                     </li>`;
          }

          html += "</ul>";
          resultsContainer.innerHTML = html;
        })
        .catch(() => {
          resultsContainer.innerHTML = "<p>Error al buscar. Intenta de nuevo.</p>";
        });

    }, DELAY);
  });

  // --- Fallback SEO (submit clásico) ---
  searchForm.addEventListener("submit", function (e) {
    e.preventDefault();
    let query = searchInput.value.trim();
    if (query.length >= MIN_CHARS) {
      searchInput.dispatchEvent(new Event("input"));
    }
  });
});
//]]>
</script>

Si quieres un buscador dedicado y limpio, crea una página estática en Blogger llamada “Buscar” y pega allí el marcador del buscador. Así tendrás tu propia URL /p/buscar.html optimizada para SEO.

Con estos pasos, tu blog en Blogger contará con un buscador moderno con AJAX, configurable desde un gadget y totalmente adaptado al diseño minimalista de NichoClean.