How to Implement Search Suggestions Autocomplete

AddSearch automatically generates search suggestions based on searches made on your website. Search suggestions become more relevant over time when the number of searches increases. In addition to suggestions based on user searches, suggestions can also be generated from custom fields or added manually.

The first step is to set up the Search Suggestions in the AddSearch dashboard. Follow the guide here Setting Up Search Suggestions. After setting up the Search Suggestions in the AddSearch dashboard, follow the instructions for different implementation methods below.

Widget and Separate Results Page views

You can configure search suggestions using the Search Designer. Open the Search Designer here.

Use the following steps to toggle search suggestions for the Widget view:

1. Click the Widget tab to open the Widget’s settings
2. Click the Basic tab to open the basic settings
3. Toggle the checkbox on the Show suggestions row to activate or deactivate the search suggestions

Use the following steps to toggle search suggestions for the Separate Results Page view view:

1. Click the Separate Results Page tab to open the Separate Results Page view’s settings
2. Click the Basic tab to open the basic settings
3. Toggle the checkbox on the Show suggestions row to activate or deactivate the search suggestions

When enabled, the show_search_suggestions: true setting should appear as follows in the exported settings object:

<!-- AddSearch settings -->
<script>
  window.addsearch_settings = {
    show_search_suggestions: true
  };
</script>

<!-- This script must be below addsearch_settings -->
<script src="https://addsearch.com/v5/addsearch-ui.min.js?key=####"></script>

Search UI Library Autocomplete Component

You can implement the Search Suggestions Autocomplete with the Search UI Library autocomplete component. To implement the Search Suggestions Autocomplete, visit the tutorial. Also check out the search suggestions autocomplete example page.

For more information on the Search UI Library visit the Getting Started with Search UI Library article and the Search UI Library reference page.

Please note that implementing the Search Suggestions Autocomplete with the autocomplete component requires familiarity with HTML and JavaScript.

API

You can also implement Search Suggestions Autocomplete with our REST API. Please note that we recommend using Search API Client for JavaScript with the REST API.

Suggestions for a certain search query can be pulled with a separate API call, for example:

Get request:
https://api.addsearch.com/v1/suggest/1bed1ffde465fddba2a53ad3ce69e6c2?term=api
AddSearch JS library call:
client.suggestions('api', callback);

For reference:

https://www.addsearch.com/support/api-reference/#suggestions

https://www.npmjs.com/package/addsearch-js-client