For dev - Instant Search Input Component
In this article
1. 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
2. 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
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
These functions can be overridden in boost-pfs-instant-search.js
for customization
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; }; /** * Bind the focus event on the search input * @param {Event} event DOM event */ SearchInput.prototype._onFocusSearchBox = function(event) {} /** * Bind the typeahead event on the search input * @param {Event} event DOM event */ SearchInput.prototype._onTypeSearchBoxEvent = function(event) { Globals.currentTerm = event.target.value; }<br>