Autocomplete quickstarts

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

Recommended for web

Autocomplete.js

Use Luigi's Box's frontend widget when you want the fastest implementation with built-in layouts and automatic analytics.

• One widget combines autocomplete, top items, and trending queries.
• Automatic analytics handling.
• Fastest path for storefront teams.

Custom build

Autocomplete APIs

Use the direct APIs when you need a custom UI, mobile integration, or backend-controlled rendering.

• Full control over the experience.
• Works outside the browser too.
• Lets you add features incrementally.

Quickstart collection

General

Start with the architecture

Review the feature set and decide whether the widget or direct APIs fit your project best.

Features and integration strategies

See how query suggestions, top items, and trending queries fit together before you implement.

Autocomplete.js

Widget path

Choose this path when you want a full web autocomplete quickly.

Implement Autocomplete.js

Connect the widget to your search input and launch a complete autocomplete flow.

Customize Autocomplete.js

Adjust layouts, actions, filtering, and translations to match your storefront.

APIs

Custom implementation path

Use these guides when you are building the experience yourself.

Query suggestions

Fetch and render the main autocomplete results with manual analytics.

Top items on focus

Show top or personalized items before a user starts typing.

Trending queries

Highlight popular search terms in your UI.

Banner campaigns

Render campaign payloads inside your custom autocomplete interface.