KI-Suche als API — deine UI, unsere Relevanz.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>Eigene Suche mit querrio</title>
  <script src="https://cdn.querrio.com/sdk.js"></script>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 720px; margin: 40px auto; padding: 0 16px; }
    input { width: 100%; padding: 12px 16px; border: 1px solid #ccc; border-radius: 999px; font-size: 16px; }
    .suggest { list-style: none; padding: 0; margin: 4px 0; border: 1px solid #eee; border-radius: 12px; }
    .suggest li { padding: 8px 14px; cursor: pointer; }
    .suggest li:hover { background: #f4f4f5; }
    .chips button { margin: 4px 4px 0 0; padding: 4px 12px; border: 1px solid #ddd; border-radius: 999px; background: #fff; cursor: pointer; }
    .chips button.active { background: #111; color: #fff; }
    .hit { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; }
    .hit img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; }
    .top { background: #f7f7f8; border-radius: 12px; padding: 12px; }
    small { color: #666; }
  </style>
</head>
<body>
  <input id="q" type="search" placeholder="Wonach suchst du?" autocomplete="off" />
  <ul id="suggest" class="suggest" hidden></ul>
  <div id="filters" class="chips"></div>
  <div id="out"></div>
  <p><small>Suche von querrio</small></p>

  <script>
    const asky = querrio.createClient({ key: "pk_dein_browser_key" });
    const $ = (id) => document.getElementById(id);
    let last = null;       // letzte Antwort
    let activeCat = null;  // gewählter Kategorie-Filter
    let timer;

    // Vorschläge beim Tippen
    $("q").addEventListener("input", () => {
      clearTimeout(timer);
      const q = $("q").value.trim();
      if (q.length < 2) { $("suggest").hidden = true; return; }
      timer = setTimeout(async () => {
        const s = await asky.suggest(q);
        if (!s.enabled || !s.items.length) { $("suggest").hidden = true; return; }
        $("suggest").innerHTML = s.items
          .map((i) => `<li data-text="${i.text}">${i.text}</li>`).join("");
        $("suggest").hidden = false;
      }, 150);
    });

    $("suggest").addEventListener("click", (e) => {
      const text = e.target.dataset.text;
      if (!text) return;
      asky.trackSuggestClick(text);
      $("q").value = text;
      $("suggest").hidden = true;
      run(text);
    });

    $("q").addEventListener("keydown", (e) => {
      if (e.key === "Enter") { $("suggest").hidden = true; run($("q").value); }
    });

    async function run(query) {
      if (!query.trim()) return;
      $("out").innerHTML = "<small>Suche läuft …</small>";
      activeCat = null;
      last = await asky.search(query);
      render();
    }

    function hitHtml(h, pos, top) {
      return `<a class="hit ${top ? "top" : ""}" href="${h.url}" data-pos="${pos}" data-id="${h.id}">
        ${h.image_url ? `<img src="${h.image_url}" alt="" />` : ""}
        <div><strong>${h.title}</strong><br /><small>${h.snippet ?? ""}</small></div>
      </a>`;
    }

    function render() {
      const r = last;
      const all = [...r.top_hits, ...r.results];

      // Keine Treffer: vorgeschlagene Begriffe anbieten
      if (!all.length) {
        $("filters").innerHTML = "";
        $("out").innerHTML = `<p>Noch nichts Passendes gefunden. Versuch es mit:</p>
          <div class="chips">${r.suggestions.map((s) => `<button data-q="${s}">${s}</button>`).join("")}</div>`;
        return;
      }

      // Kategorie-Filter aus den Gruppen
      $("filters").innerHTML = r.groups.map((g) =>
        `<button data-cat="${g.category}" class="${g.category === activeCat ? "active" : ""}">${g.label} (${g.count})</button>`
      ).join("");

      const visible = activeCat
        ? all.filter((h) => r.groups.find((g) => g.category === activeCat)?.hit_ids.includes(h.id))
        : null;

      $("out").innerHTML =
        (r.date_label ? `<small>Zeitraum: ${r.date_label}</small>` : "") +
        (visible
          ? visible.map((h, i) => hitHtml(h, i + 1, false)).join("")
          : r.top_hits.map((h, i) => hitHtml(h, i + 1, true)).join("") +
            r.results.map((h, i) => hitHtml(h, r.top_hits.length + i + 1, false)).join("")) +
        (r.suggestions.length
          ? `<p><small>Häufig gesucht</small></p><div class="chips">${r.suggestions
              .map((s) => `<button data-q="${s}">${s}</button>`).join("")}</div>`
          : "");
    }

    // Filter- und Stichwort-Klicks
    document.addEventListener("click", (e) => {
      const t = e.target.closest("button");
      if (!t) return;
      if (t.dataset.cat) { activeCat = activeCat === t.dataset.cat ? null : t.dataset.cat; render(); }
      if (t.dataset.q) { $("q").value = t.dataset.q; run(t.dataset.q); }
    });

    // Klick-Auswertung: Analytics + Autopilot lernen mit
    $("out").addEventListener("click", (e) => {
      const a = e.target.closest("a.hit");
      if (!a || !last) return;
      const hit = [...last.top_hits, ...last.results].find((h) => h.id === a.dataset.id);
      if (hit) asky.trackClick(hit, Number(a.dataset.pos));
    });
  </script>
</body>
</html>