This document is meant for users of the Search & Merchandising module with instant search who want to extend their implementation with the Suggestions module.

You need to follow these steps to migrate. A more detailed explanation of each step can be found below.

1. Disable instant search input binding
2. Implement autocomplete plugin
3. Connect autocomplete to search page

Disable instant search input binding

When using instant search; a full results page is automatically loaded when typing in a search term. We need to disable this (default) behavior. This can be done by removing all input fields in the settings of the Search & Merchandising module.

Implement suggestions module

After disabling the instant search behavior, we are now ready to implement the suggestions module. To do so, please follow the steps in this article.

Connect suggestions to search page

After implementing the suggestions module, additional configuration is required to connect it to the search page. This can be done by adding the following configuration to the initialization.

<script>
  tweakwiseSuggestions({
    
    // ...
    
    searchPhrases: {
      handle(event) {
        location.href = '/search.html#twn|?tn_q=' + event.data.match;
      }
    }
  })  
</script>

In the snippet above we are redirecting the user to a dedicated search page whenever a search term is submitted. If your website's search page is located somewhere else than /search.html please update the snippet accordingly.

More information on the configuration used above can be found in this article.