Skip to main content
All CollectionsTechnical GuidelinesFilter and Search APIApp Component
For dev - Instant Search Result Component (App Lib V2)
For dev - Instant Search Result Component (App Lib V2)
Thomas Ta avatar
Written by Thomas Ta
Updated over a week ago

⚠️ This instruction is appropriate for App Lib V2 only. Please contact us for further assistance.


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">
  • 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


Settings on DOM attribute

None


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' // Position the suggestion box to the left
}
};

Instant Search display settings


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() {
// Access the suggestion popup element that is appended to the <body> tag
var suggestionElement = this.$uiMenuElement;

// Access the search input element
var searchElement = this.$element;

// Retrieve the ID of the search input box
var searchBoxId = this.id;
};

On desktop

/**
* Modify the default element selector where the instant search results are appended.
* By default, results append to the <body>.
*/
InstantSearchResult.prototype._applyFilterAutocompleteAppendElement = function() {
this.appendToSelector = 'body';
};

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

/**
* Method called after displaying the mobile search box.
*/
InstantSearchMobile.prototype.afterShowSearchBoxMobile = function() {
// Insert custom logic here for post-display actions
};

/**
* Method called after closing the instant search on mobile.
* @param {String} isClose - Indicates whether to close the search box or just the results.
*/
InstantSearchMobile.prototype.afterCloseInstantSearchMobile = function(isClose) {
// Insert custom logic here for post-close actions
};

/**
* Method called before opening the mobile search suggestion popup, upon clicking the search input.
*/
InstantSearchMobile.prototype.beforeOpenSuggestionMobile = function() {
// Insert custom logic here for pre-popup actions
};

/**
* Method called after the mobile search suggestion popup has been constructed, following input click.
*/
InstantSearchMobile.prototype.afterOpenSuggestionMobile = function() {
// Insert custom logic here for post-popup actions
};

If you have any questions or need further assistance, please do not hesitate to contact our dedicated support team at [email protected].

Did this answer your question?