This instruction is appropriate for App Lib V2 only. Please contact us via live chat for further assistance.
Overview
Instant Search Component binds events on input[name="q"] on the DOM
For example:
<input name="q" /><br>
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.
The pop-up suggestion is appended to the DOM
Settings on DOM attribute
Custom attribute you can add on the input DOM element
data-disable-instant-search: Exclude the input from having instant search
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 of the search input
}
};
Instant Search display settings
How to customize
These functions can be overridden in boost-pfs-instant-search.js for customization
// Customize the instant search input
SearchInput.prototype.customizeInstantSearch = function() {
// Access the suggestion popup 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
var searchBoxId = this.id;
};
// Bind the focus event to the search input
SearchInput.prototype._onFocusSearchBox = function(event) {
// Code to execute when search input gains focus
};
// Bind the typeahead event to the search input
SearchInput.prototype._onTypeSearchBoxEvent = function(event) {
// Update the current search term based on the input value
Globals.currentTerm = event.target.value;
};