Skip to main content
All CollectionsTechnical GuidelinesFilter and Search APIApp Component
For dev - Instant Search Input Component (App Lib V2)
For dev - Instant Search Input 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 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;
};

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?