Product catalogs

Autocomplete over a product catalog that can be tens of thousands of SKUs deep, without a per-keystroke database query.

The data shape

A hierarchical list: categories as parent items, SKUs as children. Each SKU item carries its own metadata — price, availability, image reference — and selecting a SKU can return its category and subcategory as ancestors in the same response, so a storefront fills a breadcrumb from one selection instead of a second lookup.

A worked example

{
  "displayValue": "Wireless Mouse — Model X200",
  "value": "sku_x200",
  "metadata": {
    "priceCents": 2999,
    "inStock": true,
    "category": "Peripherals"
  },
  "ancestors": [
    {
      "displayValue": "Electronics",
      "value": "cat_electronics"
    },
    {
      "displayValue": "Peripherals",
      "value": "cat_peripherals"
    }
  ]
}

Fields

Every field this shape carries and what it means
Field	Type	Meaning
displayValue	string	The product name shown in the results list.
value	string	Your own SKU identifier — AutoSugges never invents one.
metadata.priceCents	number	Any item-level metadata you publish, rendered by a custom result renderer.
ancestors	array	The category path, returned alongside the selected item (DEC-HIER-001).

Provenance

AutoSugges does not ship a dataset for this shape — you publish your own catalog in this structure.

Integration steps

Publish your catalog as a hierarchical list — categories as parents, SKUs as children.
Attach price/availability/image fields as item metadata rather than a second lookup.
Read the ancestors AutoSugges returns to fill a breadcrumb or category filter without a second request.

Code

import { Autocomplete } from '@autosugges/client/react';
import { createAutosuggesClient } from '@autosugges/client';

const client = createAutosuggesClient({
  baseUrl: 'https://your-runtime.example.com',
  publishableKey: 'pk_live_YOUR_KEY',
});

<Autocomplete
  source={client}
  label="Product"
  onSelect={(item, { ancestors }) => {
    // ancestors carries the category path, if your catalog is hierarchical.
    setProduct(item.value);
  }}
/>

The publishable key above is a public, browser-safe identifier — never a secret.