Lightweight Search Widget
The SearchStax Site Search solution’s Search UI App 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:
- Include the following in the header:
<script src="https://static.searchstax.com/studio-js/v3/js/search-widget.min.js"></script>
- Include the widget container in your website:
<div id="div-widget-id" class='studio-search-widget'></div>
- 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',
'token'
)
- The parameters to the widget are:
- authentication: This is the authentication header for the Auto Suggest Endpoint. If your app is using Token Authentication, you will be able to find your token in App Settings. If your app is using Basic Authentication, you can construct this from the API username/password that was used when configuring the Search App – https://www.blitter.se/utils/basic-authentication-header-generator/ . It is recommended to use Read Only.
- 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 page 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’.
- authentication method – required for apps on Token Auth: Set this value as “token”. This will instruct the widget that this is the method for authentication. If your app is using Basic Auth, you do not need to include this connector configuration..
Modifying the Widget
The Lightweight Search Widget is supplied to you in a generic form. If you wish to modify it, there are three steps:
- Download https://static.searchstax.com/studio-js/v3/js/search-widget.min.js and modify it as you require.
- Place the modified .js file somewhere in your website environment.
- Modify line 11 of the widget html file to point to your new .js file.
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',
'token'
)
}
</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"> </div>
<div>
<div id="div-widget-id" class='studio-search-widget'></div>
</div>
<div class="text"> </div>
</div>
</div>
</body>
</html>
Questions?
Do not hesitate to contact the SearchStax Support Desk.