Start Today with your 30-day trial View our plans and pricing.

Events and custom methods for the search suggestions widget

Registering event handlers and methods for search suggestions widget

You can override some behaviour of the widget with your own methods or get notified of certain events.
Those overrides works on the same way as defining options

The next options can be added to the script:

Example:

window._sn.searchboxes.push({ 
engineid: '-insert-your-engine-id',
resize: function (override)
{
/* insert your code here */
}
});


The following methods have been provided as an override:

Resize and scrolling the page

While resizing or scrolling the page those methods will be used to position the results window near the search input field.

Usage:

scroll: function (override) { /* insert your code */ },
resize: function (override) { /* insert your code */  },

 

Show / hide loader

Use those events to make your own loading animation to inform visitors the input is being handled.


Usage

showLoader: function () { /* insert your code */ },
hideLoader: function () { /* insert your code */ },

Event notifications

Get notified when the widget will start rendering the search results.

beforeRenderResponse: function (data) { },

 

Get notified when the widget finished rendering the search results.

afterRenderResponse: function (data) { },

 

Get notified when the search results window is closed.

afterClose: function() { } ,

 

Get notified when the widget is initialized.

afterInit: function() { } ,

 

Get notified when the widget's search field is being expanded

beforeExpandSearchField: function() { } ,

 

Get notified after the widget's search field is expanded.

afterExpandSearchField: function() { } ,

 

Get notified when the widget's search field is going to be closed.

beforeCloseSearchField: function() { } ,

 

Get notified when the widget is finished closing the search field.

afterCloseSearchField: function() { } ,


Notifies before search operation begins.

beforeSearch: function(term){},


Notifies after search operation has ended.

afterSearch: function(term){},


Notifies after search operation has ended but not on every typed character. 

afterSearchDebounced: function(term){},


Rendering HTML without using template engine

If you have your own template engine in place or you want to disable certain methods you need to override these methods

renderResultItem: function(item) {},
renderHeader: function(data) {},
renderFooter: function(data) {},

Or override the following method to fully intercept the rendering process

renderResponse: function (data) { },
Templates