---
title: Autocomplete API
description: Build a custom autocomplete experience with Luigi's Box autocomplete endpoints.
slug: autocomplete/api
docKind: hub
hub: autocomplete
---

Use the Autocomplete API when you want to render the experience yourself in the browser, on the server, or in a mobile app. Start with the main autocomplete endpoint, then add optional top items and trending queries where they make sense for your UX.

## Endpoints

<div class="lb-guide-grid">
  <a class="lb-guide-card" href="/autocomplete/api/v2/autocomplete/">
    <h3>Autocomplete endpoint</h3>
    <p>Fetch live query suggestions and typed results for the main autocomplete flow.</p>
  </a>
  <a class="lb-guide-card" href="/autocomplete/api/v1/top-items/">
    <h3>Top Items API</h3>
    <p>Show popular or personalized products when the search field gains focus.</p>
  </a>
  <a class="lb-guide-card" href="/autocomplete/api/v2/trending-queries/">
    <h3>Trending Queries API</h3>
    <p>Highlight popular search phrases inside your autocomplete interface.</p>
  </a>
</div>

## Quickstarts

<div class="lb-guide-grid">
  <a class="lb-guide-card" href="/quickstart/autocomplete/query-suggestions/">
    <h3>Query suggestions</h3>
    <p>Call the main autocomplete endpoint and render suggestions in a custom UI.</p>
  </a>
  <a class="lb-guide-card" href="/quickstart/autocomplete/top-items-api/">
    <h3>Top items on focus</h3>
    <p>Display top products before the customer starts typing.</p>
  </a>
  <a class="lb-guide-card" href="/quickstart/autocomplete/trending-queries/">
    <h3>Trending queries</h3>
    <p>Surface popular queries alongside typed autocomplete suggestions.</p>
  </a>
  <a class="lb-guide-card" href="/quickstart/autocomplete/banner-campaigns/">
    <h3>Banner campaigns</h3>
    <p>Render merchandising campaigns inside your custom autocomplete layout.</p>
  </a>
</div>

## Guides

<div class="lb-guide-grid">
  <a class="lb-guide-card" href="/autocomplete/guides/integration-best-practices/">
    <h3>Integration best practices</h3>
    <p>Set up the API path so performance and analytics stay healthy from the start.</p>
  </a>
  <a class="lb-guide-card" href="/autocomplete/guides/filtering-and-examples/">
    <h3>Filtering and examples</h3>
    <p>Control what appears in autocomplete and how different result types behave.</p>
  </a>
  <a class="lb-guide-card" href="/autocomplete/guides/advanced-features/">
    <h3>Advanced features</h3>
    <p>Explore richer autocomplete behaviors once the core flow is working.</p>
  </a>
</div>