> ## Documentation Index
> Fetch the complete documentation index at: https://docs.glood.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Instant Search

> Add a type-ahead search box with suggestions, autocorrect and a trending empty state using the Glood Hydrogen Search SDK

Instant (type-ahead) search is a single
[`useInstantSearch`](/for-developers/glood-hydrogen-sdk/api-reference/search-api#useinstantsearch)
call that returns products, collections, pages, keyword suggestions and autocorrect — and a
`trending` block when the query is empty.

<Note>
  Prerequisite: the search app is registered (`.use(search())`), your app is wrapped in
  `<GloodProvider>`, and `https://search.glood.ai` is in your CSP `connectSrc`. See
  [Installation](/for-developers/glood-hydrogen-sdk/installation).
</Note>

## 1. Wire the input to `useInstantSearch`

Keep the query in state and gate fetching with `options.skip` until it clears the minimum
length. The minimum comes from the config (`minimum_type_ahead_input_count`), read via
[`useSearchConfig`](/for-developers/glood-hydrogen-sdk/api-reference/search-api#usesearchconfig).

```tsx theme={null}
import { useState } from 'react';
import { useInstantSearch, useSearchConfig } from '@glood/hydrogen';

export function SearchBox() {
  const { config } = useSearchConfig();
  const minChars = config?.config.minimum_type_ahead_input_count ?? 2;

  const [term, setTerm] = useState('');
  const { products, suggestions, collections, data, loading } = useInstantSearch(
    { query: term, objects: ['product', 'collection', 'query_suggestion', 'autocorrect'] },
    { skip: term.length < minChars },
  );
  // …render below
}
```

Params are an [`InstantSearchParams`](/for-developers/glood-hydrogen-sdk/api-reference/types#instantsearchparams--instantsearchresponse)
(`objects` selects which result blocks to return); `data` is an
[`InstantSearchResponse`](/for-developers/glood-hydrogen-sdk/api-reference/types#instantsearchparams--instantsearchresponse).
`config` is a [`SearchConfigResponse`](/for-developers/glood-hydrogen-sdk/api-reference/types#searchconfigparams--searchconfigresponse).

## 2. Render suggestions, autocorrect and products

`products`, `suggestions` and `collections` are convenience accessors; the full response
(`articles`, `autocorrect`, `trending`, `metadata`) is on `data`.

```tsx theme={null}
return (
  <div className="search-box">
    <input value={term} onChange={(e) => setTerm(e.target.value)} placeholder="Search…" />
    {loading && <span className="spinner" />}

    {data?.corrected_query && (
      <button onClick={() => setTerm(data.corrected_query!)}>
        Did you mean <strong>{data.corrected_query}</strong>?
      </button>
    )}

    <ul>
      {suggestions.map((s) => (
        <li key={s.text} onClick={() => setTerm(s.text)}>{s.text}</li>
      ))}
    </ul>

    <div className="grid">
      {products.map((p) => (
        <a key={p.product_id} href={`/products/${p.handle}`}>
          <img src={p.image?.url} alt={p.title} loading="lazy" />
          <span>{p.title}</span>
          <span>{p.display_price ?? p.price}</span>
        </a>
      ))}
    </div>
  </div>
);
```

Each suggestion is a [`SearchSuggestion`](/for-developers/glood-hydrogen-sdk/api-reference/types#instantsearchparams--instantsearchresponse),
each product a [`SearchProduct`](/for-developers/glood-hydrogen-sdk/api-reference/types#searchproduct).

## 3. Trending empty state

The same response carries a `trending` block whenever the query is empty or below the minimum
length — no extra call. Drop the `skip` gate so it fetches on an empty query, tune it with the
`trending` param ([`InstantSearchTrendingParams`](/for-developers/glood-hydrogen-sdk/api-reference/types#instantsearchparams--instantsearchresponse)),
and read `data.trending`:

```tsx theme={null}
const { data } = useInstantSearch({
  query: term,
  trending: { type: 'all', period: '7d', limit: 8 },
});

{term.length < minChars && data?.trending?.searches?.map((t) => (
  <button key={t.term} onClick={() => setTerm(t.term)}>{t.translated_term ?? t.term}</button>
))}
```

## 4. Submit to the results page

On <kbd>Enter</kbd> or click, navigate to your [Search Page](/for-developers/glood-hydrogen-sdk/guides/search-page)
(`/search?q=<term>`). Standard `search_submitted` events are forwarded automatically once
`search()` is registered; for explicit attribution call
[`trackSearch`](/for-developers/glood-hydrogen-sdk/api-reference/search-api#event-helpers) from
`useGloodAnalytics().getApp('search')` (see [Events & attribution](/for-developers/glood-hydrogen-sdk/search#events--attribution)).

## See also

* [`useInstantSearch`](/for-developers/glood-hydrogen-sdk/api-reference/search-api#useinstantsearch) — full returns
* [`fetchInstantSearch`](/for-developers/glood-hydrogen-sdk/api-reference/search-api#fetchinstantsearch) — SSR / non-React
* [Search Page](/for-developers/glood-hydrogen-sdk/guides/search-page)