Integrating Rich Autocomplete
Rich autocomplete enriches the customers search box experience by providing them with not only search suggestions but also product suggestions as they enter each keystroke. Product suggestions can show the product name, thumbnail image, price, and sku.
Integration HTML
Add the following HTML under your search field in your template. See options below for correct values for siteId and queryClass.
<link rel="stylesheet" type="text/css" href="//d2r7ualogzlf1u.cloudfront.net/autocomplete/autocomplete.css">
<script type="text/javascript" src="//d2r7ualogzlf1u.cloudfront.net/autocomplete/searchspring-autocomplete.min.js"></script>
<script>
SearchSpring.Autocomplete.init({
siteId: 'abc123',
queryClass : 'searchspring-query'
});
</script>
You may choose to not include the CSS stylesheet and style the autocomplete yourself, this CSS is only a starting point. Any customizations you wish to do to the look and feel can be done using CSS.
Autocomplete Options
siteId
Required
Your SearchSpring site ID. Can be found on the My Account page in the SearchSpring Management Console
siteId: 'xyz456'
searchQuery
Default: 'searchspring-query'
The CSS class of your search input field.
searchQuery: 'search_query'
offsetX
Default: 0
Positions the autocomplete results on your page. A positive value moves the results to the right and a negative value moves the results to the left.
offsetX: 5
offsetY
Default: 0
Positions the autocomplete results on your page. A positive value moves the results down and a negative value moves the results up.
offsetY: -1
searchTermCallback
Default: null
Callback triggers when a search term is clicked either in the "Search Suggestions" or "See More" section of the autocomplete. This triggers before the result redirect. It accepts one parameter that is the search term clicked. Return a false value to stop redirect from occurring.
searchTermCallback: function(term) { window.location = 'http://www.google.com/?q=' + term; return false; }
Full Example
<link rel="stylesheet" type="text/css" href="//d2r7ualogzlf1u.cloudfront.net/autocomplete/autocomplete.css">
<script type="text/javascript" src="//d2r7ualogzlf1u.cloudfront.net/autocomplete/searchspring-autocomplete.min.js"></script>
<script>
SearchSpring.Autocomplete.init({
siteId: 'asdf23',
queryClass : 'search',
offsetY: 5,
offsetX: -3,
searchTermCallback: function(term) { window.location = 'http://www.google.com/?q=' + term; return false; }
});
</script>