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. For a more comprehensive explanation of our various ways to view search results, check out our guide Different Search Result Views.

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. `addseach_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/js/?key=####"></script>

Search Results Page

Implementing search suggestions with the Search Results Page is a more advanced process which requires the use of an autocomplete library in combination with the AddSearch JavaScript library. If you haven’t chosen a library yet, we recommend using a tiny, MIT-licensed library called jQuery-autoComplete. The library can be found here.

Below is an example snippet of the third-party autocomplete library implemented alongside the AddSearch JavaScript library:

<!-- Add jQuery-autoComplete and AddSearch JS client -->
<script src="https://cdn.jsdelivr.net/gh/Pixabay/jQuery-autoComplete@1.0.7/jquery.auto-complete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Pixabay/jQuery-autoComplete@1.0.7/jquery.auto-complete.css" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@0.1/dist/addsearch-js-client.min.js"></script>

<!-- This is the search field -->
<input type="text" id="search-field" placeholder="Search.." class="addsearch" />
<div id="addsearch-results"></div>

<!-- Connect jQuery-autoComplete to the search index -->
<script>
    // Replace #### with your AddSearch sitekey here

    var sitekey = "####";
    var client = new AddSearchClient(sitekey);
    jQuery("#search-field").autoComplete({
    minChars: 1,
    source: function(term, suggest) {
        client.suggestions(term, function(resp) {
        var a = [];
        for (var i = 0; i < resp.suggestions.length; i++) {
            a.push(resp.suggestions[i].value);
        }
        suggest(a);
        });
    }
    });
</script>

<script src="https://addsearch.com/js/?key=####&amp;type=resultpage"></script>

API

It is also possible to implement Search Suggestions if you are using our 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);

The rate limit for the Search API is 5 requests/sec from a single IP address so throttling with about 200ms delay between requests is recommended.

For reference:

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

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