---
title: Autocomplete quickstarts
description: "Welcome to the Autocomplete quickstarts section of the Luigi's Box documentation. This collection of quickstarts provides everything you need to implement a powerful 'search-as-you-type' experience, enhancing your website's search and helping users find what they're looking for faster."
slug: quickstart/autocomplete
docKind: hub
hub: quickstart
---

Autocomplete can be implemented as a ready-to-use JavaScript widget or as a fully custom API-driven experience. These guides help you choose the right path, then layer in query suggestions, top items, trending queries, and campaigns.

## Choose your path

<div class="choice-container">
  <a class="choice-card" href="/quickstart/autocomplete/with-autocompletejs/">
    <span class="choice-badge" data-recommended="true">Recommended for web</span>
    <h3>Autocomplete.js</h3>
    <p>Use Luigi's Box's frontend widget when you want the fastest implementation with built-in layouts and automatic analytics.</p>
    <ul class="advantages-list">
      <li>One widget combines autocomplete, top items, and trending queries.</li>
      <li>Automatic analytics handling.</li>
      <li>Fastest path for storefront teams.</li>
    </ul>
  </a>
  <a class="choice-card" href="/quickstart/autocomplete/query-suggestions/">
    <span class="choice-badge">Custom build</span>
    <h3>Autocomplete APIs</h3>
    <p>Use the direct APIs when you need a custom UI, mobile integration, or backend-controlled rendering.</p>
    <ul class="advantages-list">
      <li>Full control over the experience.</li>
      <li>Works outside the browser too.</li>
      <li>Lets you add features incrementally.</li>
    </ul>
  </a>
</div>

## Quickstart collection

<div class="lb-guide-group">
  <p class="lb-guide-kicker">General</p>
  <h3>Start with the architecture</h3>
  <p>Review the feature set and decide whether the widget or direct APIs fit your project best.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/autocomplete/features-and-integration/">
      <h3>Features and integration strategies</h3>
      <p>See how query suggestions, top items, and trending queries fit together before you implement.</p>
    </a>
  </div>
</div>

<div class="lb-guide-group">
  <p class="lb-guide-kicker">Autocomplete.js</p>
  <h3>Widget path</h3>
  <p>Choose this path when you want a full web autocomplete quickly.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/autocomplete/with-autocompletejs/">
      <h3>Implement Autocomplete.js</h3>
      <p>Connect the widget to your search input and launch a complete autocomplete flow.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/autocomplete/customizing-autocompletejs/">
      <h3>Customize Autocomplete.js</h3>
      <p>Adjust layouts, actions, filtering, and translations to match your storefront.</p>
    </a>
  </div>
</div>

<div class="lb-guide-group">
  <p class="lb-guide-kicker">APIs</p>
  <h3>Custom implementation path</h3>
  <p>Use these guides when you are building the experience yourself.</p>
  <div class="lb-guide-grid">
    <a class="lb-guide-card" href="/quickstart/autocomplete/query-suggestions/">
      <h3>Query suggestions</h3>
      <p>Fetch and render the main autocomplete results with manual analytics.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/autocomplete/top-items-api/">
      <h3>Top items on focus</h3>
      <p>Show top or personalized items before a user starts typing.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/autocomplete/trending-queries/">
      <h3>Trending queries</h3>
      <p>Highlight popular search terms in your UI.</p>
    </a>
    <a class="lb-guide-card" href="/quickstart/autocomplete/banner-campaigns/">
      <h3>Banner campaigns</h3>
      <p>Render campaign payloads inside your custom autocomplete interface.</p>
    </a>
  </div>
</div>