<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.searchbloxAutoComplete.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
  var options = {
    autoCompleteURL: 'http://searchblox.elasticbeanstalk.com/servlet/AutoSuggest',
    searchResultsURL: 'http://searchblox.elasticbeanstalk.com/servlet/SearchServlet',
    searchResultsDivID: 'searchResults'
  };
  jQuery('#query').searchbloxAutoComplete(options);

});
</script>
<style>
	.sb_wrapper
	{
		width: 500px;
		position:relative;
		margin: 0px auto;
		padding-top: 70px;
		background: url(images/logo-searchblox.gif) no-repeat;
	}
	p	{
		margin: 0px;
		padding: 5px 0px;
	}
	table {
		width: 400px;
		border-spacing: 2px 2px;
		border-color: gray;
		border-collapse: separate;
		display: table;
	}

	.searchHolder	{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 30px;
	}

	.searchHolder input	{
		width: 450px;
		height: 23px;
		float: left;
		border: solid 1px #ccc;
	}

	.searchHolder #seachAutoComplete	{
		width: 300px;
		position: absolute;
		top: 26px;
		left: 0px;
	}

	.searchHolder #seachAutoComplete ul#suggestionsHolder 	{
		margin: 0px;
		padding: 0px;
		width: 400px;
		border: solid 1px #ccc;
		z-index: 9999;
		display: none;
		float: left;
	}


	.searchHolder #seachAutoComplete ul#suggestionsHolder li {
		margin: 0px;
		padding: 0px;
		list-style: none;
		width: 300px;
		float: left;
		background: #fff;
		cursor: pointer;
		border-bottom: #eaeaea 1px dashed;
	}
	

	.searchHolder #seachAutoComplete ul#suggestionsHolder li a	{
		height: 15px;
		padding: 5px 5px 5px 15px;
		width: 280px;
		background: #fff;
		float: left;
		text-decoration: none;
	}

	

	.searchHolder #seachAutoComplete ul#suggestionsHolder li a:hover
	{
		font-weight: bold;
		background: #D3E2FF url(images/arrow.png) 5px 10px no-repeat;
	}


	.searchHolder #seachAutoComplete ul#suggestionsHolder li a.selected
	{
		font-weight: bold;
		background: #D3E2FF url(images/arrow.png) 5px 10px no-repeat;
	}

	.loading
	{
		text-align: center;
		width: 300px;
		margin-top: 50px;
	}


	.status {
		border-top: 1px solid  #09C;
		border-bottom: 1px solid #09C;
		background: #BFD2F0;
		padding: 5px 5px;
		color: #000;
		font-size: 12px;
		line-height: 0.9em;
		height: 20px;
	}


	.pagination {
		background: #FFFFFF;
		padding: 10px;
		text-align: center;
		color: #003399;
		font-size: 12px;
	}

	.status .query

	{
		float: left;
		margin: 0px;
	}

	

	.status .matches
	{
		float: right;
		margin: 0px;
	}

	.status .bar
	{
		list-style: none;
		margin: 0px;
		padding: 0px;
	}


	.hiliter
	{
		font-weight: bold;
	}

	

	.result

	{

		border-bottom: #ccc dashed 1px;

		margin: 5px 0px;

	}

	

	.result table tr td

	{

		margin: 0px;

		padding: 0px;

	}

	

	.result .link {

		text-align: left;

	}

	

	.result .link a {

		background: #fff;

		font-size: 14px;

		color: #003399;

	}

	

	.result .desc {

		text-align: left;

		background: #fff;

		font-size: 12px;

		font-style: italic;

		color: #666;

	}

	

	.result .date {

		text-align: right;

		background: #fff;

		font-size: 10px;

		color: #ccc;

		font-style: italic;

	}

	

	.result .docurl {

		background: white;

		color: black;

		font-size: 12px;

		text-align: left;

	}

	

	.result .relevance {

		text-align: right;

		background: #fff;

		font-size: 25px;

		color: #ccc;

	}

	

	.searchform .collections {

	}



	 a#searchButton {

		background: #09C;

		color: #eaeaea;

		font-size: 12px;

		font-weight: bold;

		float: left;

		padding: 5px 10px;

		height: 15px;

		cursor: pointer;

		border: solid 1px #666;

		margin-left: 10px;

		text-decoration: none;

	}

	

	a#searchButton:hover {

		background: #069;

		color: #fff;

	}

	

	#searchResults

	{

		width: 500px;

		float: left;

	}

	

	#toggleButtons

	{

		width: 400px;

		float: left;

		text-align:right;

		color: #069;

		font-size: 10px;

		margin-top: 3px;

	}

	

	#toggleButtons a

	{

		cursor: pointer;

		color: #069;

		font-size: 10px;

	}

	

	#toggleButtons a:hover

	{

		text-decoration: underline;

	}

</style>

	<div class="sb_wrapper">

        <div class="searchHolder">

            <input maxlength="96" style="width:400px;" name="query" id="query" autocomplete="off" value=""><a href="javascript: function(){};" id="searchButton">Search</a>

            <div id="toggleButtons">

            	<a id="autoCompleteToggle">Autocomplete <strong>on</strong></a> | <a id="instantToggle">Instant search <strong>on</strong></a>

            </div>

            <div id="seachAutoComplete"></div>

        </div>

        

        <div id="searchResults"></div>

    </div>

