InstantSearch.js (Quickstart)

Learn how to use Autocomplete with InstantSearch.js.

Autocomplete is also available as an experimental widget in InstantSearch, making it easier to integrate into your search experience. To learn more, see the API reference for InstantSearch.js or React InstantSearch.

This guide uses create-instantsearch-app to help you quickly build a JavaScript search app that integrates InstantSearch and Autocomplete.

Before you begin

This guide requires Node.js version 8 or later and npm.

Integrate InstantSearch with Autocomplete

Open the terminal and run:

npx create-instantsearch-app my-app --template "InstantSearch.js"

Accept the default options throughout the installation process by pressing Enter. However, you can replace any of the default options with your own.

To ensure that your app integrates Autocomplete with InstantSearch, pay particular attention to these configuration options:

• Attributes to display
• Attributes for faceting
• Search input

Attributes to display

Select name, description, and categories when prompted.

Attributes for faceting

Choose brand when prompted.

Search input

Select Autocomplete as your search input and use the default index for Query Suggestions.

Selecting Y when being prompted to “Enable user events” activates the insights option, which allows Algolia to process your user events. Events can unlock powerful aspects which enhance your app’s effectiveness.

For more details about events collection and settings, review the API reference.

When create-instantsearch-app has finished, it will have created a new app, in the directory my-app, with everything you need.

Go to the my-app directory:

cd my-app || exit

Run the app:

npm start

Open your browser and go to http://localhost:3000.

This is what you should see

Next steps

• Read more about styling.
• Get inspired to further customize your look and feel by taking a look at the sandboxes.
• Start your own project with a full installation of InstantSearch.js.