For dev - Instant Search Result Component (App Lib V2)

In this article

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

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

None

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'
  }
};
<br>

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 = this.id;
};
<br>

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';
};
<br>

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>

Related Articles