Customization options for the search suggestion widget

The next options can be added to the script:

window._sn.searchboxes.push({ 
engineid: '-insert-your-engine-id',
-- insert your options here --
});

Labels (optional)

Gives you the possibility to provide your own translations for specific text in the widget.

Usage: (below is the current default text labels)

labels: {
 placeholder: '',
 searchButtonText: '',
 noResultsLabel: "No results found for '{0}'",
 showResultsLabel: "Showing {1} of {2} results for '{0}'",
 viewAllResultsLabel: "View all {0} results..."
},

noResultsLabel:

• {0} = Search keywords

showResultsLabel:

• {0} = Search keywords
• {1} = Items shown
• {2} = Total items found

viewAllResultsLabel:

• {0} = Total items found

width

The results window will be maximum of this amount of pixels. Default value is 800 pixels.

Usage: 

width: 800,

breakwidth

The results window will be shown in full width if the window width is below this width.

Usage: 

breakwidth: 800,

margin

The results window width will be have a margin added to the left and right side. (Default value is 10)

Usage: 

margin: 10,

topmargin

The results window extra top margin. (Default value is 10)

Usage: 

topmargin: 10,

type

The results window will be shown in full width if the window width is below this width.

Usage: 

type: 'Default', 

Possible options:

Default: Is here for backwards compatibility, please don't use this as it might change.
ExpandOnClick: This will open up the search input when clicking on the magnifying icon.
Expanded: This is already open.

Further implementations will be added in the future.

searchParam

This configures the query string or hash key. Default setting is q, so searching will alter the current page url by adding #q={keyword}

Usage:

searchParam: 'q',

searchParamInQuerystring

The default setting is to read the current page URL hash value #q={keyword}. By changing this value to true we will use the query string instead ?q={keyword}

Usage:

searchParamInQuerystring: false,

Specify CSS query selectors

You can easily override the CSS query selectors that are used by the widget to your own needs. This is needed when you change the template rendering without providing the same CSS selectors.

Usage (defaults)

container: '#searchform', 
suggestions: ".js-suggestions",
collection: ".js-suggestions-collection",
header: ".js-suggestions-header",
footer: ".js-suggestions-footer",
searchField: '.js-search-input',
searchButton: '.js-search-button',
loader: '.js-loader', 

The next options can be added to the script:

window._sn = window._sn || [];
window._sn.config = {
 -- insert your config parameters --
};

Disable loading css files
Disable loading additional CSS files (so you need to have your own styling in place)

Usage:

disableCss: true,

Default value: false

Disable sticky header
Sometimes the widget is placed in a sticky header.
For this to work perfectly on mobile devices it is needed to disable sticky-ness when the searchine field is focussed.
To do this we add the css class "searchine-open" to the body tag. You can use this CSS Selector to override the sticky css of the header where the widget is located.

When this might be enough, in most situations when disabling the sticky header it may be needed to scroll to the top of the page after performing a search. This can be easily done by using the afterRenderResponse event handler:

afterRenderResponse: function (data) {
if (window.matchMedia('screen and (max-width:768px)').matches)
{
window.scrollTo(0,0);
}
},

Auto expand on mobile menu's (for type="ExpandOnClick")
When mobile navigation menu's become visible it might be needed to auto-expand the search field.
You can add the "expandOnClickMobileBreakpoint" option with the breakpoint width.
If the window width is less or equal to the specified breakpoint width an extra css class "searchine-mobile-open" is added to the body tag.