For dev - Instant Search Result Component

1. Overview

Instant Search Results Component renders a suggestion div on <body> tag when you type in search box (on header, on search page,...)

For example, you will find this <div> in the <body> after typing in search box:

<div class="boost-pfs-search-suggestion-wrapper" data-search-box-id="boost-pfs-search-box-0"><br>
  • data-search-box-id: the ID of the search input this search result is for.

We use jQuery's autocomplete for the instant search.

In boost-pfs-init.js, you will see boostPFS.initInstantSearch(). This will:

  • Class & events are appended to the search input.
  • Instant Search Result is appended to the DOM
  • Instant Search Result is updated after typing into search input and receiving data from API

2. Settings on DOM attribute


3. Settings in javascript

You can set these settings for the instant search in boost-pfs-instant-search.js , like so

// Override Settings
var boostPFSInstantSearchConfig = {
  search: {
    // Settings list
    suggestionPosition: 'left'

Instant Search display settings

4. How to customize

See the list of functions related to the search input in section 4 of Instant Search Input Component

Override the function in boost-pfs-instant-search.js

SearchInput.prototype.customizeInstantSearch = function() {
	// The popup suggestion that is appended to <body> tag
	var suggestionElement = this.$uiMenuElement;
	// The search <input name="q"> element
	var searchElement = this.$element;

	// The id of the search input
	var searchBoxId =;

4.1. On desktop

* Change the element selector where the instant search result append to.
* Default is <body>
InstantSearchResult.prototype._applyFilterAutocompleteAppendElement = function() {
	this.appendToSelector = 'body';

4.2. On mobile

On mobile, we use a different element for instant search. When tapping on <input name="q"> it opens a full-page popup.

Inside the popup are:

  • Another search input (separate from the <input name="q"> in liquid code)
  • Another list of search results
* After show the instant search mobile
InstantSearchMobile.prototype.afterShowSearchBoxMobile = function() {}

* After close the instant search mobile
* @param {String} isClose Close the search box or just close the instant search result
InstantSearchMobile.prototype.afterCloseInstantSearchMobile = function(isClose) {}

* Called when clicking on the <input name="q"> on the DOM,
* before building the mobile popup
InstantSearchMobile.prototype.beforeOpenSuggestionMobile = function() {}

* Called when clicking on the <input name="q"> on the DOM,
* after building the mobile popup
InstantSearchMobile.prototype.afterOpenSuggestionMobile = function() {}<br>