Search suggestions widget

This widget provides visitors with a search bar with search results in a overlay


The purpose for this widget is to add search capabilities to every page on your website by providing a small widget to the top of the page and provide with small set of instant search results with the possibility to expand to full results.

The integration is fully customizable and web / front-end developers can extend the widget to their needs. Different scenario's can be made by using the custom options.


The basic setup is as following:

1. Add the HTML to the top of the page where you want the search bar to be loaded.

<div id="snsearch" class="snsearch">
<form class="searchform" novalidate="novalidate" action="/search" method="get" autocomplete="off"></form>

2. Put the JavaScript part to the bottom of the page. Make sure you also include jQuery.

<script type="text/javascript">
    if (typeof window._sn === 'undefined') {
        window._sn = window._sn || [];
    if (typeof window._sn.config === 'undefined') {
        window._sn.config = {
            engineid: "-- insert your engine id --",
    if (typeof window._sn.searchboxes === 'undefined') {
        window._sn.searchboxes = window._sn.searchboxes || [];
        engineid: "-- insert your engineid --",
        type: "ExpandOnClick",
        container: "#snsearch"
<script id="snscript" async defer src="//"></script>

Example: (Click on the magnifying glass)



If the surrounding container div has the class "snsearch" then our CSS styling will be applied.
Additional styling can be added as providing normal CSS.

Custom options

Custom options can be set for translating, changing templates and overriding some of the internal functionality.

Check our documentation.

Advanced widgets