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

# Search Autocomplete

> Predictive search suggestions for autocomplete

# Search Autocomplete

Returns predictive-search suggestions for autocomplete UIs. This is a
**storefront** endpoint served from the store domain — no OAuth token is
required (it is the same endpoint themes call from the browser).

There are two response shapes:

* `GET /search/suggest.json` — returns a Shopify-compatible JSON payload.
* `GET /search/suggest` — returns a rendered HTML section (used by themes
  that render the predictive-search drawer markup directly).

This page documents the JSON form.

## Request

```bash theme={null}
curl -X GET "https://mystore.launchmystore.io/search/suggest.json?q=shir&resources[type]=product,collection"
```

## Parameters

<ParamField query="q" type="string" required>
  Search query (predictive search activates at 2+ characters). Also accepts
  the `query` alias, and Shopify-style syntax such as `id:123 OR id:456`.
</ParamField>

<ParamField query="resources[type]" type="string" default="product,collection,article,page">
  Comma-separated result types: `product`, `collection`, `article`, `page`.
</ParamField>

<ParamField query="resources[limit]" type="integer" default="10">
  Maximum results per type (max 50). Also accepts the `limit` alias.
</ParamField>

## Response

Matches the Shopify `/search/suggest.json` shape: a top-level `resources`
object containing `results` grouped by type.

<ResponseField name="resources" type="object">
  <Expandable title="resources">
    <ResponseField name="results" type="object">
      <Expandable title="results">
        <ResponseField name="products" type="array">
          Matching products.
        </ResponseField>

        <ResponseField name="collections" type="array">
          Matching collections.
        </ResponseField>

        <ResponseField name="articles" type="array">
          Matching blog articles.
        </ResponseField>

        <ResponseField name="pages" type="array">
          Matching pages.
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

## Example Response

```json theme={null}
{
  "resources": {
    "results": {
      "products": [
        {
          "id": "prod_abc123",
          "title": "Classic Cotton Shirt",
          "handle": "classic-cotton-shirt",
          "description": "A breathable everyday cotton shirt.",
          "published_at": "2024-01-10T08:00:00.000Z",
          "vendor": "Acme",
          "product_type": "Shirts",
          "tags": ["cotton", "casual"],
          "price": "45.00",
          "price_min": "45.00",
          "price_max": "45.00",
          "available": true,
          "image": "https://cdn.launchmystore.io/images/shirt-thumb.jpg",
          "featured_image": "https://cdn.launchmystore.io/images/shirt-thumb.jpg",
          "url": "/products/classic-cotton-shirt"
        }
      ],
      "collections": [
        {
          "id": "col_shirts",
          "title": "Shirts",
          "handle": "shirts",
          "description": "All shirts.",
          "published_at": "2024-01-01T00:00:00.000Z",
          "image": "https://cdn.launchmystore.io/images/shirts.jpg",
          "url": "/collections/shirts",
          "products_count": 45
        }
      ],
      "articles": [],
      "pages": []
    }
  }
}
```

## Performance Tips

* Use debouncing (300ms) in your UI before making requests.
* Start searching at 2+ characters for relevant results.
* Cache frequent queries on the client.
* Use `resources[type]` to limit result types for faster responses.

## Example Implementation

```javascript theme={null}
// React example with debouncing
const [suggestions, setSuggestions] = useState(null);
const debouncedSearch = useMemo(
  () => debounce(async (query) => {
    if (query.length < 2) {
      setSuggestions(null);
      return;
    }
    const res = await fetch(
      `/search/suggest.json?q=${encodeURIComponent(query)}&resources[limit]=8`
    );
    const data = await res.json();
    setSuggestions(data.resources.results);
  }, 300),
  []
);
```