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>

Related Articles