Lightweight Search Widget


The SearchStudio UX accelerator provides a lightweight pure javascript widget to show a simple search icon and search box 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/v3/js/search-widget.min.js"><strong>https://static.searchstax.com/studio-js/v3/js/search-widget.min.js</strong></a>"></script>
  1. Include the widget container in your website:
<div id="div-widget-id" class='studio-search-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/',
    3,
    'searchStudioQuery',
    'div-widget-id',
    'en'
)
  • 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 
    • number of characters: Auto-suggestions will display after this number of characters is typed
    • query: When the search page link is invoked, the widget will pass ?<SPECIFIED PARAMETER>=<QUERY> to the search pag e link
    • ID of the widget: The ID of the widget
    • language: Which language-specific experience to use as the auto-suggest source. If not specified, defaults to ‘en’.

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/v3/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/',
                3,
                'q', 
                'div-widget-id',
                'en'
            )
        }
    </script>
    <style>
        .left-margin{
            margin-left: 500px;
        }
        .flex{
            display: flex;
        }
        .text{
            padding: 10px;
 
        }
    </style>
    <style>
         .studio-search-widget {
            position: relative;
            width: 60px;
            text-align: center;
            border: 1px solid #ced4da;
            border-radius: 80px;
            padding: 10px 0;
        }

        .studio-search-widget .studio-widget-search-icon{
						position:relative;
						display:inline-block;
						background: #fff;
						border-radius: 30px;
						height: 8px;
						width: 8px;
						border: 2px solid #2e2e30;
						margin-left: -5px;
        }

        .studio-search-widget .studio-widget-search-icon:after {
						content: "";
						height: 2px;
						width: 8px;
						background: #2e2e30;
						position:absolute;
						top:9px;
						left:7px;
    				                -webkit-transform: rotate(45deg);
						-moz-transform: rotate(45deg);
						-ms-transform: rotate(45deg);
						-o-transform: rotate(45deg);
  			}

        .studio-search-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;
	    display: flex;
        }

	.studio-search-widget .search-wrapper .studio-widget-small-search-icon{
		position:relative;
		display:inline-block;
		background: #fff;
		border-radius: 30px;
		height: 6px;
		width: 6px;
		border: 2px solid #2e2e30;
		margin-left: 15px;
		margin-right: 5px;
		margin-top: 4px;
	}
	.studio-search-widget .search-wrapper .studio-widget-small-search-icon:after{
		content: "";
		height: 2px;
		width: 6px;
		background: #2e2e30;
		position:absolute;
		top:7px;
		left:5px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
	}

	.studio-search-widget .search-wrapper .studio-widget-search-input{
		padding-top: 4px;
	}

        .studio-search-widget.expanded .search-wrapper{
            visibility: visible;
            width: 600px;
        }


        .studio-search-widget .search-wrapper .studio-widget-autosuggest-results{
            position: absolute;
            width: calc(100%);
            top: 42px;
            box-shadow: 0 6px 15px 0 rgb(0 0 0 / 10%);
	    border-radius: 15px;
        }

        .studio-search-widget .search-wrapper .studio-widget-autosuggest-results .result-row{
            width: calc(100% - 60px);
            padding: 10px;
	    padding-left: 30px;
            text-align: left;
	    text-transform: capitalize;
        }

        .studio-search-widget .search-wrapper .studio-widget-autosuggest-results .result-row.searchstudio-active-row{
            /* background-color: white; */
	    color: #4bb5e2;
            cursor: pointer;
        }

        .studio-search-widget .search-wrapper input{
            width: calc(100% - 40px);
            border: none;
            height: 13px;
            box-shadow: none;
            outline: none;
            z-index: 4;
            /* padding: 0 20px; */
        }
    </style>
  </head>
<body onload="initiateSearchWidget()">
    <div class="left-margin">
        <div class="flex">
            <div class="text">&nbsp;</div>
            <div>
                <div id="div-widget-id" class='studio-search-widget'></div>
            </div>
            <div class="text">&nbsp;</div>
        </div>
    </div>
</body>
</html>