Docsearch see more

by maxiloc

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" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.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 style="margin: 40px;">
      <input type="text" id="docsearch" class="form-control" placeholder="Search in the doc">
      <input style="display: none;" id="empty">
    </div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/autocomplete.js/0.24.0/autocomplete.min.js"></script>
  </body>

CSS

.ds-suggestion:not(:last-child) .see-more {
    display: none;
}
.see-more {
  float: right;
}

JavaScript

var search = docsearch({
		  apiKey: 'c25b7174e8f6161ce5fdd44bb0b95081',
		  indexName: 'buckbuild',
		  inputSelector: '#empty'
		});

var options = {
  cssClasses: {
    prefix: 'ds',
    root: 'algolia-autocomplete algolia-autocomplete-left'
  },
  hint: false,
  debug: true
};

var actual_search = autocomplete('#docsearch', options, [
  {
    source: search.getAutocompleteSource(),
    name: 'docsearch',
    templates: {
      suggestion: function(suggestion, answer) {
        var t = docsearch.getSuggestionTemplate();

        var link_to = '#q=' + actual_search.autocomplete.getVal(); // for instantsearch.js it will look like: '#q=' + suggestion.q, but you can change it to something else
        var link = "<a href='"+link_to+"'>See more results</a>";

        return t(suggestion) + '<div class="see-more">' + link + '</div>';
      },
      empty: docsearch.getEmptyTemplate()
    }
  }
]);