API Dev Ready-made View Search UI

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.


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 -->
  window.addsearch_settings = {
    show_search_suggestions: true

<!-- 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 that 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 -->
    // Replace #### with your AddSearch sitekey here

    var sitekey = "####";
    var client = new AddSearchClient(sitekey);
    minChars: 1,
    source: function(term, suggest) {
        client.suggestions(term, function(resp) {
        var a = [];
        for (var i = 0; i < resp.suggestions.length; i++) {

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


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:
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:



Need more help?

We’re always happy to help with code or other questions you might have. Search our documentation, contact support, or connect with our sales team.