AutoSuggestJS Module


The SearchStax UX accelerator provides a lightweight pure javascript widget to show a simple search icon and searchbox on your website. When the search is actually fired, the widget redirects to your actual search page.

This widget is not dependent on JQuery or Vue.

It shows up by default as the search icon shown below:

which when clicked shows the search bar, complete with search suggestions.

The search icon and the search bar can be reformatted easily using CSS.

To use this widget:

  1. Include the following in the header:
<script src="<a href="https://static.searchstax.com/studio-js/v2/js/search-widget.min.js"><strong>https://static.searchstax.com/studio-js/v2/js/search-widget.min.js</strong></a>"></script>
  1. Include the widget container in your website:
<div id="searchstudio-widget"></div>
  1. Initialize the widget once the container is finished rendering
new SearchstudioWidget(
    'ZTBwNDA12345tYXBpOlN0YXgjMjM0',
    'https://ssXXXX.searchstax.com/solr/suggester-collection/emsuggest',
    'https://www.searchstax.com/search/'
)
  • The parameters to the widget are:
    • authentication: This is the Basic Authentication header for the Auto Suggest Endpoint. You can construct this from the API username/password that was used when configuring the Studio Application – https://www.blitter.se/utils/basic-authentication-header-generator/
    • auto suggest endpoint: This is the Auto-suggest endpoint of your search application, that you can get from the App Management page
    • search page link: This is the link to your search page. The widget will pass the search query to the search page so it can render the results and take you to that page 

Full HTML Example

<!DOCTYPE html>
 
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Search Widget</title>
 
 
        <script src="https://static.searchstax.com/studio-js/v2/js/search-widget.min.js"></script> 
 
    <script type="text/javascript">
        function initiateSearchWidget(){
            //Call when document is loaded
            new SearchstudioWidget(
                'ZTBwNDA12345tYXBpOlN0YXgjMjM0',
                'https://ssXXXX.searchstax.com/solr/suggester-collection/emsuggest',
                'https://www.searchstax.com/search/'
            )
        }
    </script>
    <style>
        .left-margin{
            margin-left: 500px;
        }
        .flex{
            display: flex;
        }
        .text{
            padding: 10px;
 
        }
    </style>
    <style>
        #searchstudio-widget{
            position: relative;
            width: 60px;
            text-align: center;
            border: 1px solid #ced4da;
            border-radius: 80px;
            padding: 10px 0;
        }
 
        #searchstudio-widget #search-icon{
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNzJweCIgaGVpZ2h0PSI3MnB4IiB2aWV3Qm94PSIwIDAgNzIgNzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcyIDcyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGQzY3MzAiIGQ9Ik01NC4wMzYsNDguMDM4TDcxLjQxOSw2NS40M2wtNS41NTEsNC45NjNMNDkuNTEyLDU0LjAzM2MtNS4yMiw0LjIzLTExLjg3MSw2Ljc1OS0xOS4xMSw2Ljc1OQ0KCUMxMy42MTMsNjAuNzkyLDAsNDcuMTgxLDAsMzAuMzk3QzAsMTMuNjA5LDEzLjYxMywwLDMwLjQwMSwwYzE2Ljc4NiwwLDMwLjM5NiwxMy42MDksMzAuMzk2LDMwLjM5Nw0KCWMwLDcuMjQyLTIuNTM0LDEzLjg4OC02Ljc2MiwxOS4xMTFWNDguMDM4eiBNMzAuNDE0LDUyLjcxYzEyLjMzOSwwLDIyLjM0Mi0xMCwyMi4zNDItMjIuMzQxYzAtMTIuMzM5LTEwLjAwMy0yMi4zMzktMjIuMzQyLTIyLjMzOQ0KCWMtMTIuMzQxLDAtMjIuMzQxLDEwLTIyLjM0MSwyMi4zMzlDOC4wNzMsNDIuNzEsMTguMDczLDUyLjcxLDMwLjQxNCw1Mi43MSIvPg0KPC9zdmc+DQo=');
            height: 18px;
            width: 18px;
            background-size: 100%;
            background-position: center center;
            background-repeat: no-repeat;
            margin-left: auto;
            margin-right: auto;
        }
 
        #searchstudio-widget .search-wrapper{
            visibility: hidden;
            position: absolute;
            right: -1px;
            top: -1px;
            width: 60px;
            text-align: center;
            border: 1px solid #ced4da;
            border-radius: 80px; 
            padding: 10px 0;
            background-color: white;
            transition: visibility 0.2s, width 0.2s ease-in;
 
        }
 
        #searchstudio-widget.expanded .search-wrapper{
            visibility: visible;
            width: 300px;
        }
 
 
        #searchstudio-widget .search-wrapper #autosuggest-results{
            position: absolute;
            width: calc(100%);
            top: 35px;
            box-shadow: 2px 2px 3px rgb(0 0 0 / 15%);
        }
 
        #searchstudio-widget .search-wrapper #autosuggest-results .result-row{
            width: calc(100% - 20px);
            padding: 10px;
            text-align: left;
 
        }
 
        #searchstudio-widget .search-wrapper #autosuggest-results .result-row.searchstudio-active-row{
            background-color: #f2f2f2;
            cursor: pointer;
        }
 
        #searchstudio-widget .search-wrapper input{
            width: calc(100% - 40px);
            border: none;
            height: 13px;
            box-shadow: none;
            outline: none;
            z-index: 4;
            /* padding: 0 20px; */
        }
    </style>
 
<body onload="initiateSearchWidget()">
    <div class="left-margin">
        <div class="flex">
            <div class="text">&nbsp;</div>
            <div>
                <div id="searchstudio-widget"></div>
            </div>
            <div class="text">&nbsp;</div>
        </div>
    </div>
</body>
</html>