Integrations / Platforms / Magento 2 / Autocomplete Menu
May. 10, 2019

Autocomplete Menu


In order to customize the autocomplete drop-down menu appearing underneath the search bar, there’s one essential folder from which the code should be changed. From the root directory of your Magento project, the necessary files can be found in vendor/algolia/algoliasearch-magento-2/view/frontend. This folder contains all the templates, JavaScript, and stylesheets in use.

Changing Looks


We provide a default style sheet, algoliasearch.css. This CSS can be overridden by a custom style sheet to change the look and feel of the search according to your needs.


Sometimes, to change the look of the search, structural changes have to be introduced to the HTML code by editing some of the templates.

Search Box Template

To change the appearance of the search bar, navigate to the templates directory and locate the autocomplete.phtml file. This file is a default file of Magento, and is used only when the default search box selector is used (.algolia-search-input).

To change the appearance of the dropdown appearing under the search bar, multiple files need to be edited. These files can all be found in the autocomplete folder of the extension.

The files that are included when rendering the dropdown are:

Changing Behavior

All logic of the autocomplete.js can be adjusted by making use of all events provided by our plug-in. The plug-in will call your custom logic at the right moment.

The events can be used to modify data sources and options. The modified values will be used by our plug-in after your logic has been executed.

Some quick examples:

// modify default sources
algolia.registerHook('beforeAutocompleteSources', (sources, algoliaClient) => sources);

// modify default options
algolia.registerHook('beforeAutocompleteOptions', options => options);

Did you find this page helpful?