Search Box
Search Box
To add a simple search box to your website, copy and paste the provided code into a new empty HTML file and update the Form Action URL with the location of your SearchBlox search server, such as https://localhost:8443/. The form is built using Bootstrap, making it responsive, and the search input field will automatically adjust its size based on the device or browser you are using.
Copy all the content below this line into a new empty HTML file and open the file in a web browser.
<!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">
<title>SearchBlox Search Box</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3">
<!-- Update the searchblox server location below in the action field-->
<form action="https://localhost:8443/search/index.html" method="get">
<!--To add search parameter use the syntax as in the line below-->
<!--<input type="hidden" name="col" value="2">-->
<input type="hidden" name="f.colname.size" value="10">
<input type="hidden" name="facet.field" value="colname">
<input type="hidden" name="f.keywords.size" value="10">
<input type="hidden" name="facet.field" value="keywords">
<div class="input-group custom-search-form">
<input type="text" class="form-control" name="query" value="">
<input type="hidden" name="public" value="true">
<span class="input-group-btn">
<button class="btn btn-default" type="search">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
To embed SearchBlox search in your web page, follow a procedure similar to the one explained above by using the SearchServlet or the faceted search URL in the form action. You can also include hidden fields in the form to pass custom values for specific fields.
- Search Box UI in the Browser
Drupal Search Integration using Search Box Form Code
You can integrate SearchBlox Search into your Drupal website by creating a site page for the search and copying the Search Box form code as shown in the reference screenshots below:
- Create a Basic Page in Drupal
- Edit the site page and select full HTML
- Configure the input parameters according to your requirements.
- Save the configuration and check the preview.
- Check the Search page to view the search results.
Search Widget
The SearchBlox widget is an additional feature of the SearchBlox plugins that allows users to deploy the SearchBlox Server on any domain-accessible server and use the plugin from anywhere through the widget code.
The widget code, provided at the bottom of the page, should be added inside the HTML file, while the required script and link elements should be included in the head section for better functionality. To embed the SearchBlox widget on your web page, follow the procedure demonstrated in the video.
You can override CSS by using either an external CSS file or internal CSS styles.
Steps for deploying SearchBlox Widget
Prerequisite
- Please give your plugin domain in the facet.js file found in the filepath,
/webapps/ROOT/search/"pluginDomain": "https://searchblox.domain.com"
Widget Code Implementation
Within the head element, add the favicon. You can choose and use a favicon based on your requirement (optional).
<link rel="shortcut icon" href="https://searchblox.domain.com/search/favicon.ico" type="icon/ico">
<link rel="shortcut icon" href="https://searchblox.domain.com/search/favicon.png" type="icon/png">
Give the following within body element.
<script src="https://searchblox.domain.com/search/facet.js"></script>
<script src="https://searchblox.domain.com/search/build.js"></script>
Provide your domain name accordingly. For example, if your SearchBlox domain is searchblox.domain.com, then the reference URL should be set as shown below.
<script src="https://searchblox.domain.com/search/facet.js"></script>
<script src="https://searchblox.domain.com/search/build.js"></script>
You can add default parameters or filters in the widget by using hidden input fields, as shown below. This allows you to pass values such as the collection number and collection name through the widget, and you can also send filter and domain values in the same way.
<input type="hidden" id="sb_col" value="1" />
<input type="hidden" id="sb_cname" value="cnn" />
<input type="hidden" id="public" value="true">
<input type="hidden" id="sb_plugin_domain" value="https://searchblox.domain.com"/>
<input type="hidden" id="sb_filter" value="url:www.cnn.com"/>
However, this plugin is currently available to our customers, please contact [email protected] to get the download link for this plugin.
The sample widget HTML code is shown below.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Search Results</title>
<link rel="shortcut icon" href="https://searchblox.domain.com/search/favicon.ico" type="icon/ico">
<link rel="shortcut icon" href="https://searchblox.domain.com/search/favicon.png" type="icon/png">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- From 9.2 version It will also be possible to add default parameters or filters from the widget through hidden input fields -->
<input type="hidden" id="sb_query" value="*" />
<input type="hidden" id="sb_col" value="1" />
<input type="hidden" id="sb_cname" value="cnn" />
<input type="hidden" name="public" value="true">
<input type="hidden" id="sb_plugin_domain" value="https://searchblox.domain.com"/>
<input type="hidden" id="sb_filter" value="url:'www.cnn.com'"/>
<input type="hidden" id="sb_page" value="3|20"/>
<input type="hidden" id="sb_sort" value="lastmodified|asc"/>
<input type="hidden" id="sb_default" value="OR"/>
<input type="hidden" id="sb_tunetemplate" value="WEB"/>
<script src="https://searchblox.domain.com/search/facet.js"></script>
<script src="https://searchblox.domain.com/search/build.js"></script>
</body>
</html>
- Search Widget in the UI
Updated 6 months ago