Search result on another page when hitting search button

Hi, I’d like to redirect the user as soon he click on the search button, in other word, not doing an instant search but having a search form on a page and the result on another page. I’ve been checking the doc, here :

and there :

Is there somewhere a complete example of 2 pages (one with the form and another with the result), because none of the code sandbox is showing an example with 2 pages.

I understood the routing stuff but how to say or write : “send me to another page with the result of the query”?

Thank you

Hi @romain , have you figured this out? I am trying to do the same thing but also can’t find any information. Thanks!

Hi @accounts7,

Yes, I managed to do to it, not sure it’s the right way to go but it’s working for me.

so as you can pass stuff to the url eg: https://your-website.com/search-result-page/?your-index[query]=test

My submit button is a link, on click, if the search field is filled with some text, the url is created on the fly and your are sent on the result page :

<a href="https://your-site.com/your-result-page/?your-algolia-index[query]=" class="home-search-bar__submit"></a>
var theTextQuery = '';

const autocompleteSearch = autocomplete({
    container: '.home-search-bar__input',
    placeholder: 'Search',
    openOnFocus: false,
    plugins: [querySuggestionsPlugin],
    onStateChange({ state }) { // On search field update
        theTextQuery = state.query; // update the theTextQuery variable
    },
});

$('.home-search-bar__submit').on('click', function (e) {
    e.preventDefault();
    var baseUrl = $(this).attr('href'); // the href must be the one from the search result page
    var endUrl = baseUrl + theTextQuery; // the updated url which will look like https://your-site.com/your-result-page/?your-algolia-index[query]=the-query

    if (theTextQuery != '') { // if search inout field is not empty
        console.log(endUrl);
        window.location = endUrl; // go to page result with the search query in the url
    }
});

Again, there must be another way to do that, but haven’t been able to find, and this is working pretty fine. Hope it helps.

@romain Thank you very much! :smiling_face:

1 Like