Your Page Title

ZeroIndex answers fast enough to search on every keystroke. This guide builds a search box in plain JavaScript that calls the API straight from the browser. The same steps apply in React, Vue or Svelte.

Create a search key

Never use an admin key in the browser. Create a search key in the dashboard, or a scoped key on your server if each user should only see their own documents.

Add the markup

<input type="search" placeholder="Search products" data-search />
<ul data-results></ul>

Search on input

Cancel the previous request whenever a new one starts, so a slow answer never overwrites a newer one.

import { ZeroIndex } from "@zeroindex/client";

const client = new ZeroIndex("zi_search_7b1e04d6a3");
const index = client.index("products");
const input = document.querySelector("[data-search]");
const list = document.querySelector("[data-results]");
let controller;

input.addEventListener("input", async () => {
  controller?.abort();
  controller = new AbortController();

  const { hits } = await index.search(input.value, {
    limit: 8,
    attributesToHighlight: ["name"],
    signal: controller.signal,
  });

  list.innerHTML = hits.map((hit) => `<li>${hit._formatted.name}</li>`).join("");
});

Style the highlights

Matching words come back wrapped in <mark> tags. Style them to fit your design.

[data-results] mark {
  background: none;
  font-weight: 600;
}

Debouncing

You do not need to debounce: requests are cheap and usually answer in under 50 ms. If you search a very large index on slow connections, wait about 100 ms after the last keystroke before sending.

Empty queries

An empty query returns the first documents by ranking. Show them as suggestions when the box gets focus, or clear the list instead.