Getting started with Searchine Tutorials Developer documentation
Frequently asked questions
Docs
Search suggestions widget
Options

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:

ExpandOnClick: This will open up the search form.

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', 
searchinputcontainer: '.js-searchform-container',
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.

Auto expand on mobile menu's
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.






Templates