Hubspot Site Search Autocomplete - Adjust the number of results in live search

Learn how to adjust the number of results in the Hubspot Site Search Autocomplete module by setting a minimum, maximum and default number of results in the module.

The Hubspot Site Search Autocomplete module is a global page and blog module. It will work on all Hubspot hosted website pages, landing pages, and blog pages.

We built the autocomplete module to extend the usability of Hubspot site search. The module is designed to emulate the google live search experience. When a user starts typing into the search bar, a live display of search results populate as the user types their search query.

A number of settings are available for customization within the Hubspot Site Search Autocomplete module. The full list of available customizations within the site search autocomplete module are listed at the bottom of this page for reference.

This article is an in depth guide on how to adjust the number of results in the Hubspot Site Search Autocomplete module by setting a minimum, maximum and default number of results in the module.

hubspot_site_search_autocomplete_number_of_results

Adjust the number of results displayed in your Hubspot live search autocomplete module

To adjust the number of results displayed in your Hubspot live search bar, you'll need to open the module in your design manager, listed under the Marketing > Files and Templates > Design Tools tab within your Hubspot portal.

Hubspot  design tools

The Site Search Autocomplete module will be located in your marketplace folder. Find the module and click to open it in your module editor.

Navigating the Custom Module Editor

When you open the module, you'll see the code that runs the module in the center editor panel and a group of module options in the right panel. The right panel is where we'll be making the adjustments to control the amount of search results shown within the live search field of the autocomplete search bar.

When all module options are collapsed in the right panel within the module editor, the panel will display a group of options as shown below:

hubspot site search module options

In order to adjust the number of results displayed in the live search results, we'll need to adjust the "Max Results" option by expanding the "Fields" option group, shown below:

adjust max search results

Once the field group is expanded, click the "Max Results" edit button to adjust the number of search results. Clicking the edit button will open the Max Results options within the right pane.

To adjust the number of results shown in your live search response, you'll need to adjust the "Content Options" shown within the Max Results option group, as shown below:

max live search results options

Setting the Minimum, Maximum, and Default Number of Search Results

Within the "Content Options" field, you can adjust the minimum (Min), maximum (Max), and default number of results shown in your live search results. Note that the default number cannot be larger than the max number of designated results.

Set the search results options to your desired amount and click "Publish Changes" in the top right of your screen to test the changes on the front end of your site.

publish search module option changes

Workflow for Hubspot custom module option adjustments:

  1. Publish the module to a page or preview link and keep the page open in one browser tab.
  2. In a different tab, open the module editor in the Hubspot design tools and make desired adjustments.
  3. Once you make and publish the changes, switch over to the open tab with the staged page and test the results.
  4. Return to the module editor tab for any further changes and repeat as needed.

Click here to download the module for your Hubspot website, blog, and landing pages.

Please rate the module here → - ratings help our team continue to support the module ;)

Site Search Autocomplete Customization Options

Currently, the full list of customizations within the custom site search module are as follows:

  • Portal ID - used for setting your portal ID and required for the autocomplete module to work
  • Accent Color - used for setting the brand color of your autocomplete search bar. This field accepts a hex color value and includes a percentage toggle for adjusting the opacity of the search bar accent color.
  • Show Label - on by default, the show label field sets a value of "true" or false" which turns on and off the label text on your search bar.
  • Label Text - allows you to control the text shown in the search bar label. By default, the text in the label is "Enter a search term below:"
  • Input Placeholder Text - Allows you to edit the placeholder text within the search bar before a user starts a search query. By default, the search bar input placeholder text is "Search Our Site"
  • Short List Items - Allows you to control the live search results. On by default and forces the title and description for each result in the list to truncate and only take up 1 line.
  • Max Results - this option is explained in detail below.
  • Date Formatting - allows you to control the date formatting of any post dates displayed in the live search results. By default, the date is displayed as "MM/DD/YYYY" for US users with a secondary option for EU users. You can add more date formatting options through the module field as well as choose a default date format.
  • View All Link - on by default, this module field allows you to toggle the visibility of the "View All" button below the search results in the live search section. Unchecking will disable the "View All" button from populating beneath the search results.
  • View All URL - allows you to set the URL of your search results page.
  • View All Text - Controls the text displayed in the "View All" button. By default, the text displayed is "View all matches for "%term%"" (the token %term% is a dynamic placeholder which will replicate the term entered into the search bar)
  • Disable Styles - off by default. This option allows you to inherit styles from your sites CSS style sheet instead of through the custom search module.
  • Primary Domain to Search - By default, search results are gathered from ALL your domains. To include results from only a single domain, enter it here. If you want to search all domains under your Portal ID, leave this field blank.
  • Excluded Domains - List any domains from which you would like to omit search results. By default, HubSpot returns results from ALL domains and subdomains under your Portal ID.

Module Support Options

If you have further questions regarding the Site Search Autocomplete module, please reach out to our support team using one of the following support channels: