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.

📘

In this example we are assuming the /search.html page already has the JS Implementation's script included in the head of the HTML. This way when opening the search page Tweakwise will automatically show the corresponding search results.

If your search page does not yet have the JS implementation script included, please still do so.

👍

When using autocomplete instead of the instant search, you may wish to remove the "Close" button on the search overlay (lister page with search results, e.g. when pressing enter in the search input). For that you can use the closeSearchButton: false option with the Search & Merchandising package.