Search result on another page when hitting search button

Open Q&A
#1

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

#2

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

#3

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.

#4

@romain Thank you very much! :smiling_face:

1 Like