Skip to main content

Create Search Suggestions Autocomplete with Search UI Library

This guide explains how to set up search suggestions autocomplete using the AddSearch Search UI Library. Autocomplete helps users complete their search queries by showing suggested keywords dynamically, improving search efficiency, especially on mobile devices.

Autocomplete suggestions search view

Overview​

Creating a search suggestions autocomplete involves these steps:

  1. Include necessary dependencies
  2. Add HTML containers for components
  3. Initialize JavaScript client and Search UI Library instances
  4. Create autocomplete components and start the library

This tutorial assumes basic knowledge of HTML and JavaScript.

1. Include Dependencies​

Add the JavaScript client and Search UI Library scripts and stylesheets to your webpage. Always use the latest Search UI Library version to access new features and fixes.

<!-- AddSearch JavaScript Client -->
<script src="https://cdn.addsearch.com/addsearch-client.min.js"></script>

<!-- Search UI Library CSS -->
<link rel="stylesheet" href="https://cdn.addsearch.com/addsearch-ui.min.css" />

<!-- Search UI Library JavaScript -->
<script src="https://cdn.addsearch.com/addsearch-ui.min.js"></script>

Check the Search UI Library releases on GitHub for the latest versions and changelogs.

2. Add Containers​

Add HTML elements where the search field and autocomplete results will appear. Use the following IDs:

<div id="searchfield"></div>
<div id="autocomplete"></div>

3. Initialize JavaScript Client and Search UI​

Create instances for the AddSearch JavaScript client and the Search UI Library. Replace 'YOUR_SITE_KEY' with your actual site key from your AddSearch account.

// Initialize AddSearch JavaScript Client
var client = new AddSearchClient('YOUR_SITE_KEY');

// Configuration parameters
var config = {
  searchResultsPageUrl: '/search',  // Page to redirect after search submit
  updateBrowserHistory: false      // Set to true to update URL history
};

// Create instance of Search UI Library
var searchui = new AddSearchUI(client, config);

4. Create Components and Start Search UI​

Add the search field and autocomplete components to their containers. Configure the autocomplete to use search suggestions as its data source.

Note: Enable Search Suggestions in your AddSearch dashboard before using this feature.

// Search field component
searchui.searchField({
  containerId: 'searchfield',
  placeholder: 'Keyword...'
});

// Autocomplete component showing search suggestions
searchui.autocomplete({
  containerId: 'autocomplete',
  sources: [
    {
      type: AddSearchUI.AUTOCOMPLETE_TYPE.SUGGESTIONS
    }
  ]
});

// Start the Search UI
searchui.start();

Result​

Test your search suggestions autocomplete on the AddSearch demo page.

For additional customization and options, refer to the Search UI Library reference documentation.