# Predictive search

> Add predictive search to a Shoplazza Theme so product suggestions appear as customers type, using the search Ajax API endpoint and the search object.

You can add predictive search to your theme so that suggested results appear immediately as you type into the search field. Predictive search helps customers articulate and refine their search queries and provides new ways for them to explore an online store. It also lets them quickly browse matches without having to leave their current page to see a separate list of search results.

Predictive search supports suggestions for products.

## Resources

* The `/{locale}/api/search` endpoint of the [Predictive Search API](./)
* The [search object](/docs/theme/references/liquid/objects/search)
* The [add\_root\_url filter](/docs/theme/references/liquid/filters/hosted-file#add_root_url)
* The [spz-list component](https://lessjs.shoplazza.com/latest/components/spz-list/)

## Implementing predictive search

To support predictive search, you need to implement the following components:

* A search input for predictive search to apply to.
* A section to host the general predictive search display.  This display is populated with the results of the predictive search using the `spz-list component` with `/api/search` API.

:::note
The `spz-list` component is currently only available in the `Geek`, `Flash`, `Wind`, `Nova 2023`, and `One page` theme, other theme need to use JavaScript functions to display the search result list.
:::

```liquid title="snippets/search_predictive.liquid"
<input type="text" name="q" value="{{ search.terms | escape }}" @input-debounced="search-predictive-list.refresh(keyword=event.value)">

<spz-list
  id="search-predictive-list"
  layout="container"
  initial-page="0"
  size="limit"
  page-size="4"
  src="{{ '/api/search' | add_root_url }}?keyword={{ search.terms | escape}}"
  list="data.products"
  total="data.total"
>
  <template>
    <a href="${data.url}">
      <spz-img
        layout="responsive"
        width="${data.image.width}"
        height="${data.image.height}"
        src="${data.image.src}"
        alt="${data.image.alt}"
      ></spz-img>
      <span>${data.title}</span>
    </a>
  </template>
</spz-list>
```