Frontend hook implementation to replace Magento suggestions by Algolia's Query Suggestion in the Autocomplete menu

hooks.js

/**
 * Documentation: https://community.algolia.com/magento/doc/m2/frontend-events/
 **/

/**
 * Autocomplete hook method
 * autocomplete.js documentation: https://github.com/algolia/autocomplete.js
 **/

algolia.registerHook('beforeAutocompleteSources', function(sources, algoliaClient, algoliaBundle) {

  // Parsing the different autocomplete source to find the suggestions one
  for (var i = 0; i < sources.length; i++) {
    if (sources[i].name === 'suggestions') {
      // Setting the new index containing the Algolia Query Suggestions
      var index = algoliaClient.initIndex('query_suggestions_test'),
        suggestionsSource = algoliaBundle.$.fn.autocomplete.sources.hits(index, {
          hitsPerPage: algoliaConfig.autocomplete.nbOfQueriesSuggestions
        });

      // Replacing the data for the suggestions source
      sources[i] = {
        source: suggestionsSource,
        displayKey: 'query',
        name: 'suggestions',
        templates: {
          suggestion: function (hit) {
            hit.url = algoliaConfig.baseUrl + '/catalogsearch/result/?q=' + hit.query;

            return algoliaConfig.autocomplete.templates.suggestions.render(hit);
          }
        }
      };

      break;
    }
  }

  return sources;
});