Dedicated search page

Is there a way to have a dedicated page that shows the results with pagination and all?

For example, when you hit enter while searching for a term, it now takes you to the first result. I know you can disable this in the autocomplete.js options, but is there a way to redirect you to a page with all the results?

Thanks!

1 Like

This is not something we provide by default as one of the mail goal of docsearch is to be “plug and play”

That being said the index generated by our crawler can be use in a various way including building a dedicated search page.

It just requires a bit of custom code but it’s pretty straightforward.

I prototyped it a while ago with instantsearch.js (our library to build instant search pages).
You can have a look here: https://jsfiddle.net/maxiloc/oemnhuv4/

2 Likes

Hi @maxime, sorry if this is outdated, but I just ran across your comment and JSfiddle as I’m trying to implement something similar (using my docsearch index for instantsearch.js). My problem is that I’m using Docusaurus, so there’s no easy way for me to add the template <script> tag. Is there another way to implement your solution? I tried this but it doesn’t work:

  const hitTemplate = function(hit) {

  return `
    <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>
  `;
}

and then

mainSearch.addWidget(
    instantsearch.widgets.hits({
      container: '#search-hits',
      templates: {
        empty: 'No results',
        item: hitTemplate
      }
    })