How do I add a simple search box to the website?

To add a simple search box to your website, please copy and paste the following code into an empty html file and update the location of your SearchBlox search server (http://localhost:8080/) in the Form Action field. This bootstrap based form is responsive and will adjust the text input field size according to your device browser. 

Copy everything below this line into an empty html file and open using a 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>

<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
.custom-search-form{
margin-top:5px;
}
</style>
<div class="container">
<div class="row">
<div class="col-lg-3">


<!-- Update the searchblox server location below in the action field-->
<!-- Change the action to http://localhost:8080/searchblox/plugin/index.html shown below if you want faceted search results -->
<!-- <form action="http://localhost:8080/searchblox/plugin/index.html" onsubmit="return encodeQuery()" method="get"> -->
<form action="http://localhost:8080/searchblox/servlet/SearchServlet" onsubmit="return encodeQuery()" method="get">

<!--To add search parameter use the syntax as in the line below-->

<!--<input type="hidden" name="col" value="2">-->

<div class="input-group custom-search-form">
<input type="text" class="form-control" name="query" value="">
<span class="input-group-btn">
<button class="btn btn-default" type="search">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>

</span>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

To embed SearchBlox search in your web page, the procedure is similar to the above. Embed the SearchServlet or the faceted search URL in your web page using form action. You can also add hidden fields with custom values for certain fields.

 



To learn more about SearchBlox please visit our developer document site https://developer.searchblox.com/docs

Have more questions? Submit a request

Comments