We have implemented Algolia search on our website It is working fine but we want some enhancement in the search bar display taking time.

As I have debugged code and found Magento 2 Algolia search input is appended dynamic, causing the issue in loading after the full page is loaded.

Here is a sample HTML Code that binds the search bar to this div.

<div id="algoliaAutocomplete" class="block block-search algolia-search-block algolia-search-input"></div>

Here is js code which is appending autocomplete.js

options = {
            container:          algoliaConfig.autocomplete.selector,//This is the selector that is appending the attached search bar in screenshot.
            placeholder:        algoliaConfig.translations.placeholder,
            debug:              algoliaConfig.autocomplete.isDebugEnabled,
            detachedMediaQuery: 'none',
            onSubmit(data) {
                if (data.state.query && data.state.query !== null && data.state.query !== "") {
                    window.location.href = algoliaConfig.resultPageUrl + `?q=${encodeURIComponent(data.state.query)}`;
            getSources({query}) {
              return filterMinChars(query, debounced(autocompleteConfig));
            shouldPanelOpen({ state }) {
                return state.query.length >= MIN_SEARCH_LENGTH_CHARS;

enter image description here

My main concern the search input should loaded with all content and should not append with js. and should work as expected.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.