Docsearch instantsearch

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.7.1/dist/instantsearch.min.css">
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.7.1"></script>
<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">
</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}}} <a href="{{{_highlightResult.hierarchy.url}}}">{{{_highlightResult.content.value}}}</a> {{{/content}}}
      </div>
    </div>
  </script>

  <script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.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-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: 'e574b72c1301f8a28e49ec9644096c79',
    indexName: 'apereo',
    routing: true
  });

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

  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();
});