---
title: Autocomplete
description: Luigi's Box Autocomplete shows customers relevant, real-time results from the very first keystroke with low-latency search-as-you-type functionality.
slug: autocomplete
docKind: hub
hub: autocomplete
---

Luigi's Box Autocomplete is a feature designed to show customers relevant, real-time results from their very first keystroke. The system is highly optimized for speed (latency), providing an instant and seamless user experience. It learns from user behavior through analytics integration to continuously improve the relevance of its suggestions.

To accommodate different development needs, Autocomplete can be integrated in two primary ways. You can use [Autocomplete.js](/autocomplete/autocomplete-js/), a comprehensive JavaScript widget that handles all functionality out of the box, or the core [Autocomplete API](/autocomplete/api/) for a fully custom implementation.

## Choose your integration path

<div class="choice-container">
  <a class="choice-card" href="/autocomplete/autocomplete-js/">
    <span class="choice-badge" data-recommended="true">Recommended for web</span>
    <h3>Autocomplete.js</h3>
    <p>A JavaScript widget that combines autocomplete, top items, trending queries, and analytics into one frontend integration.</p>
    <ul class="advantages-list">
      <li>Fastest implementation path.</li>
      <li>Built-in layouts and storefront-friendly defaults.</li>
      <li>Automatic analytics handling.</li>
    </ul>
  </a>
  <a class="choice-card" href="/autocomplete/api/">
    <span class="choice-badge">Custom build</span>
    <h3>Autocomplete API</h3>
    <p>Use the APIs directly when you need a custom UI, a backend-managed flow, or a mobile integration.</p>
    <ul class="advantages-list">
      <li>Full control over rendering and behavior.</li>
      <li>Supports richer filtering and personalization.</li>
      <li>Lets you add features incrementally.</li>
    </ul>
  </a>
</div>

## Start here

<div class="lb-overview-links">
  <p>
    <strong>Still comparing paths?</strong>
    Start with <a href="/quickstart/autocomplete/features-and-integration/">features and integration strategies</a>.
  </p>
  <p>
    <strong>Fastest storefront implementation?</strong>
    Continue with <a href="/quickstart/autocomplete/with-autocompletejs/">Implementing Autocomplete.js</a>.
  </p>
  <p>
    <strong>Need a custom interface?</strong>
    Continue with <a href="/quickstart/autocomplete/query-suggestions/">Getting query suggestions via the API</a>.
  </p>
</div>

## Core concepts

Beyond the primary integration paths, Autocomplete is enhanced by several key APIs and concepts that create a complete experience.

- [**Trending queries API:**](/autocomplete/api/v2/trending-queries/) This API fetches the most popular and relevant search queries based on your site's analytics. These phrases can be used as placeholders in the search bar or to provide typing suggestions to guide users.
- [**Top items API:**](/autocomplete/api/v1/top-items/) Use this API to populate a recommender popup with your most popular items. It's designed to engage users the moment they click into the search box, even before they start typing anything.
- **Performance:** The Autocomplete feature is engineered for speed. To achieve low latency, it fetches only the top results (`top-k hits`) rather than scanning the entire index, which means it does not provide a total hits count.