⚠️ 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].