Components: the search box

Put the movies-and-actors group in front of a visitor as a real search box.

On a web page, @searchstack/autocomplete turns any <input> into an as-you-type search box wired to your list or group. Tiny and framework-agnostic; it handles debouncing, keyboard navigation, mobile full-screen mode and cancelled requests, and you style the rows.

Try it

A box wired to a live movies-and-actors group on the public API. Try matrix, hemsworth, dark or dream:

Every keystroke calls the suggest endpoint on the Demo account’s movies-and-actors group with a read-only demo key, drawing films and actors with different row templates.

Add it to a page

An input for it to bind to:

<input id="movie-search" style="width:100%" />

Then import the component and call attachGroup with the input's id, an API key scoped to suggest (it ships in your page, so keep it read-only), the account, the group name, and the group's current membership version:

<script type="module">
  import { attachGroup } from 'https://cdn.jsdelivr.net/npm/@searchstack/autocomplete@2/dist/searchstack-autocomplete.js'

  await attachGroup('movie-search', 'YOUR_SUGGEST_KEY', 'Demo', 'movies-and-actors', 3)
</script>

Prefer a build step? It's on npm:

npm install @searchstack/autocomplete

import { attachGroup } from '@searchstack/autocomplete'

await attachGroup('movie-search', 'YOUR_SUGGEST_KEY', 'Demo', 'movies-and-actors', 3)

For a single list, call attachList instead: same arguments, but the list name and its version number.

Style each result

Each result shows its name by default. For richer rows pass a template, a function taking a result and returning HTML. Group results carry a list_name, so one box can render a film and a person differently:

await attachGroup('movie-search', 'YOUR_SUGGEST_KEY', 'Demo', 'movies-and-actors', 3, {
  template: (r) => {
    if (r.list_name === 'actors') {
      return `<div class="row">
        <img src="${r.image_url}" width="40">
        <div><strong>${r.name}</strong><br><small>Actor</small></div>
      </div>`
    }
    return `<div class="row">
      <img src="${r.image_url}" width="40">
      <div><strong>${r.name}</strong> <small>(${r.year})</small></div>
    </div>`
  }
})

Not using JavaScript? Call the API directly

The plug-in makes one HTTPS request per keystroke: a POST to suggest/group/{account}/{group}/{version}/{query} (drop the /group segment for a single list), with your suggest key in the X-API-Key header:

curl -X POST "https://api.searchstack.dev/suggest/group/Demo/movies-and-actors/3/hemsworth" \
  -H "X-API-Key: YOUR_SUGGEST_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "size": 6 }'

Back comes a plain list of matching records — the data the box draws its rows from:

[
  { "list_name": "actors", "name": "Liam Hemsworth", "image_url": "…" },
  { "list_name": "actors", "name": "Chris Hemsworth", "image_url": "…" }
]

Wire that into a Python backend, a Swift app, a Go service, wherever your search box lives. Full request and response details: the suggest reference.