Installation

How to install Site Search 360 on your site

Just copy the following script in your site right before the tag and you're set. More advanced configuration can be applied later.

<script>
   // create a settings object
   var ss360Config = {
      // your site id
      siteId: 'mysiteid',
      // a CSS selector that points to your search  box
      searchBoxSelector: '#searchBox',      
   };
</script>
<script src="https://sitesearch360.com/cdn/sitesearch360-v7.min.js"></script>

Please make sure you have an box on your site and that is a CSS selector that points to that input. If you do not have an input box on your site just copy this code into your site:

Configuration Options

Advanced Configuration

There are many options that help you configure and customize the search experience. Here is a complete list of configuration parameters. Read the inline comments to know how to use the parameters.

<script>
   // create a settings object
   var ss360Config = {
      /////////// required ///////////
      // your site id
      siteId: 'mysiteid',
      // a CSS selector that points to your search  box
      searchBoxSelector: '#searchBox',

      /////////// optional ///////////
      // the text to show before the search results, #QUERY# will be replace with the query
      searchResultsCaption: 'Search results for your query #QUERY#',
      // if undefined, a layer with the search results will appear
      // you can embed the results by pointing to the DOM element where the results should be inserted
      // e.g. {'contentBlock':'a selector where the results should be inserted'}
      searchResults: undefined, 
      // whether to show search suggestions
      showSearchSuggestions: true,
      // whether to show images in search suggestions
      showImagesSuggestions: true, 
      // whether to show images in search results
      showImagesResults: true, 
      // if you want to trigger the search on a click of a button, put the button CSS selector here
      // e.g. 'button.search-button'
      searchButton: undefined,
      // speed of the animations in milliseconds
      animationSpeed: 300,
      // minimum number of characters before the suggestions shows
      minChars: 3, 
      // the maximum number of search suggestions to be shown [1, 25]
      numSuggestions: 10, 
      // the maximum number of search results to be shown [1,1000]
      numResults: 100, 
      // if you want the default CSS styling
      defaultCss: true,
      // navigation through content groups on "top", "left", or "none"
      navigation: 'top',
      // whether to highlight query terms in the search suggestions
      highlight: true, 
      // whether to highlight the query terms in search results
      highlightQueryTerms: true, 
      // if true, the search box will get focus after initialization
      autofocus: false, 
      // the placeholder text in the search box
      placeholder: 'Search here',
      // the theme color (navigation, loader, headlines)
      themeColor: '#329fd9',
      // extra HTML code that is shown in each search suggest
      extraHtml: undefined,
      // the name of the results not in any other content group
      otherContentGroupName: 'Other',
      // whether or not to ignore the "other" content group
      ignoreOtherContentGroup: false,
      // whether results should be grouped when content groups are availalbe (v9 and up)
      groupResults: true,
      // whether or not to show links to the result in the search result
      showResultLink: false,
      // the name of the search query parameter, e.g. http://site.com?ss360Query=search (v8 and up)
      searchQueryParamName: 'ss360Query',
      // HTML for the more results button, if this is undefined, all results will be shown
      // e.g. 'Show more results'
      moreResultsButton: undefined, 
      // the number of new results to show each time the more results button is pressed, moreResultButton must not be undefined
      moreResultsPagingSize: 50, 
      // the (HTML) text to show when there are no results
      noResultsText: 'Sorry, we have <b>not found any matches</b> for your query.', 
      // the (HTML) text to show when there are no suggests, default: undefined (no text)
      noSuggests: '<b>We haven\'t found anything for you, sorry</b>',
      // suggests to show for empty queries, default: undefined (nothing)
      emptyQuerySuggestions: {
          "suggests":{
              "Group Title 1":[
                  {
                    "id":"1",
                    "name":"Mason Jar Lid Lights",
                    "link":"//yoursite.com.com/articles/text1",
                    "image":"//yoursite.com.com/articles/text1.jpg"
                  },
                  {
                    "id":"2",
                    "name":"Spreadable Beer",
                    "link": "//yoursite.com.com/articles/text2",
                    "image":"//yoursite.com.com/articles/text2.jpg"
                  }
              ],
              "Another Group Title":[
                  {
                    "id":"3",
                    "name":"Canon PowerShot SX710 HS",
                    "link":"https://yoursite.com.com/articles/text3",
                    "image":"https://yoursite.com.com/articles/text3.jpg"
                  },
              ]
          }
      },
      // whether to show implementation errors, set to false for production
      showErrors: true,
      // if you only want to search within a certain content group, e.g. ['Articles']
      includeContentGroups: [],
      // if you only want to exclude a certain content group from the search results, e.g. ['Articles']
      excludeContentGroups: [],
      // a callback that is triggered when enter is pressed in the search box
      // e.g. function(text) { $(this).closest('form').submit();}
      // if you only want suggestions and the form should be submitted on enter
      enterCallback: undefined,
      // callback on what should happen when enter is pressed when a link is selected, undefined means the link will be followed
      enterCallbackResult: undefined,
      // a callback that is triggered when the user types in the search box
      typeCallback: undefined,
      // a callback that is triggered when the user leaves the search box
      blurCallback: undefined,
      // a callback that is triggered before the search is executed, e.g. to catch empty queries
      preSearchCallback: undefined,
      // a callback that is triggered after the search results have been populated
      postSearchCallback: undefined,
      // a callback that is triggered after the search is executed, e.g. to build your own result page from the response
      searchResultCallback: undefined,
      // a callback that is triggered after the initialization is complete
      initCallback: undefined,
      // external tracking libraries
      externalTracking: { 
          // how to track, supported values: 'GA' (Google Analytics), 'GTM' (Google Tag Manager)
          providers: ['GA'], 
          // callback before SERP is reported, SERP events aren't reported if this returns false
          searchCallback: function(query) {
              // do custom things here
              return true;
          }
      },

      /////////// experimental ///////////
      // if true, a layer will be shown when the user focuses on the search input
      inputFocusLayer: false,
   };
</script>
<script src="https://sitesearch360.com/cdn/sitesearch360-v7.min.js"></script>

If you have a search button, simply bind an click event (<button onclick="return clickSearch(event);"></button>) to the following function to trigger a search or use the searchButton configuration parameter by pointing to the search button(s).

function clickSearch(clickevent) {
    var e = jQuery.Event("keyup");
    e.which = 13;
    e.keyCode = 13;
    $("#searchBox").trigger(e);
    clickevent.stopPropagation();
    return false;
}