This document is meant for users of the JS Implementation with instant search who want to migrate to autocomplete.

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 setting the following local configuration.

<script>
  window['twn-starter-config'] = {
    input: []
  }
</script>

Implement autocomplete plugin

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

Connect autocomplete to search page

After implementing the autocomplete plugin, additional configuration is required to connect it to the search page. This can be done by adding the following configuration when initializing the autocomplete.

<script>
  tweakwiseSuggestions({
    
    // ...
    
    searchPhrases: {
      handle: ({ data }) => {
        location.href = '/search.html#twn|?tn_q=' + 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.