Get Started

Installation


How to install Site Search 360 on your site

Just copy the following script in your site right before the </body> tag and you’re set. More advanced configuration can be applied later.

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

Please make sure you have an <input> box on your site and that searchBoxSelector 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:

<input id="searchBox" type="text" placeholder="search" />


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: 'www.springlane.de_1',
      // 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 theme color (navigation, loader, headlines)
      themeColor: '#329fd9',
      // extra HTML code that is shown in each search suggest
      extraHtml: undefined,
      // 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 text to show when there are no results
      noResultsText: 'Sorry, we have not found any matches for your query.', 
      // the 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: {} (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
      searchResultSearchCallback: undefined,
      // a callback that is triggered after the initialization is complete
      initCallback: undefined
   };
</script>
<script src="https://cdn.semknox.com/sitesearch360-v6.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;
}