Docsearch instantsearch

HTML

<head>
<title>Docsearch Instant Search Demo</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
</head>
  <body>
	  <nav class="navbar navbar-default">
		  <div class="container-fluid">
		    <div class="navbar-header">
		      <a class="navbar-brand" href="#">Docsearch Instant Search Demo</a>
		    </div>
		  </div>
		</nav>
  	<div class="container">
		<div id="ais-input-container" class="col-md-4 col-md-offset-4"></div>
	</div>
	<div class="container">
		<div id="ais-results-container"></div>
		<div id="ais-pagination-container"></div>
	</div>

	<script type="text/template" id="ais-results-template">
		<div class="ais-result">
			{{#hierarchy.lvl0}}
			<div class="ais-lvl0">
				{{{_highlightResult.hierarchy.lvl0.value}}}
			</div>
			{{/hierarchy.lvl0}}

			<div class="ais-lvl1">
				{{#hierarchy.lvl1}}
					{{{_highlightResult.hierarchy.lvl1.value}}}
				{{/hierarchy.lvl1}}

				{{#hierarchy.lvl2}}
					> {{{_highlightResult.hierarchy.lvl2.value}}}
				{{/hierarchy.lvl2}}

				{{#hierarchy.lvl3}}
					> {{{_highlightResult.hierarchy.lvl3.value}}}
				{{/hierarchy.lvl3}}

				{{#hierarchy.lvl4}}
					> {{{_highlightResult.hierarchy.lvl4.value}}}
				{{/hierarchy.lvl4}}
			</div>
			<div class="ais-content">
				{{{#content}}}
					{{{_highlightResult.content.value}}}
				{{{/content}}}
			</div>
		</div>
	</script>

	<script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
  </body>

CSS

#ais-results-container .algolia-docsearch-suggestion--highlight {
  background-color: rgba(89, 165, 234, 0.2);
}

.ais-content {
  color: #63676d;
}

.ais-lvl0 {
  color: black;
  font-size: 1.1em
}


#ais-input-container input {
  width: 100%;
  padding: 8px 16px;
  border-radius: 3px;
  box-shadow: none;
  border: solid 1px #ddd;
}

.ais-result {
  margin-bottom: 15px;
  border-left: solid 1px #ddd;
  padding-left: 10px;
}

input:focus{
  outline: none;
}

JavaScript

$('document').ready(function () {
		var search = instantsearch({
		  appId: 'BH4D9OD16A',
		  apiKey: 'c25b7174e8f6161ce5fdd44bb0b95081',
		  indexName: 'buckbuild',
		  urlSync: true
		});

		search.addWidget(
		  instantsearch.widgets.searchBox({
		    container: '#ais-input-container',
		    placeholder: 'Search in the documentation',
		    autofocus: false,
		    poweredBy: true
		  })
		);

		search.addWidget(
		  instantsearch.widgets.hits({
		    container: '#ais-results-container',
		    templates: {
		      empty: 'No results',
		      item: $('#ais-results-template').html()
		    },
		    hitsPerPage: 6
		  })
		);

		search.addWidget(
		  instantsearch.widgets.pagination({
		    container: '#ais-pagination-container',
		    maxPages: 20,
		    // default is to scroll to 'body', here we disable this behavior
		    scrollTo: false
		  })
		);

		search.start();
	});