Search suggestions widget

Purpose

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.

Setup

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>
</div>

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 || [];
    }
    window._sn.searchboxes.push({
        engineid: "-- insert your engineid --",
        type: "ExpandOnClick",
        container: "#snsearch"
    });
</script>
<script id="snscript" async defer src="//cdn-test.searchine.net/scripts/dist/searchine.loader.min.js"></script>

Example: (Click on the magnifying glass)

Styling

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.