Implementing 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.

To first set up Search Suggestions, you can follow our guide for Setting Up Search Suggestions. Once you’ve done this, you can implement search suggestion functionality in your search whether you’re using the Widget view, Search Results Page view, or using a custom configuration via our API.

Widget

Search Suggestions can be installed for the Widget view with a global JavaScript variable called “addsearch_settings”. The variable must be defined above the script tag loading the AddSearch JavaScript snippet. `addsearch_settings` supports the `show_search_suggestions` setting, which has a true or false value. To enable search suggestions in the widget view, define `show_search_ suggestions` as `true`.

<!-- 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 Results Page

You can implement the Search Suggestions Autocomplete to a search results page with the Search UI Library. Please note that implementing the Search Suggestions autocomplete requires familiarity with HTML and JavaScript.

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.

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