Basics

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",
        expandOnClickMobileBreakpoint: 600
    });
</script>
<script type="text/javascript">
	(function () {
		var snloadf = function() {
			if (typeof window.__snld != "undefined") { return; }
			window.__snld = 1;
			var s = document.getElementsByTagName("script")[0];
			var b = document.createElement("script");
			b.type = "text/javascript";
			b.async = true;
			b.id = "snscript";
			b.src = "//cdn.searchine.net/scripts/searchine.min.js";
			s.parentNode.insertBefore(b, s);
		};
		setTimeout(snloadf, 0);
	})();
</script>

Example: (Click on the magnifying glass)

In above set-up, we use the type "ExpandOnClick". That means that when clicking the magnify icon the search field becomes visible. On mobile devices, you can automatically switch to an expanded variant by setting the breakpoint adding the "expandOnClickMobileBreakpoint" option. This adds a CSS class ("searchine-mobile-open") to the body tag. 

Another solution is the type "Expanded". This type is useful when the search is open by default.

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.