For dev - Instant Search Input Component (App Lib V2)

In this article

This instruction is appropriate for App Lib V2 only. The app lib V3 associated documents will be available soon. Please contact us for further assistance.

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 Settingsvar 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