Instantsearch.js: How to re-send the query with js e.g. on browser back?

[beffa]

We have the search box and results in a modal window.

If the user clicks on a result, and then hits the back button, we re-open the modal view with the last search term in the search box. How to re-send the query?

Is there an way to trigger a search, couldn't find it in the docs.

[Haroenv]

search.refresh() should do it, it clears the cache and forces a new query from the network. If you are fine with having a search from the cache, you can use search.helper.search()

[hilkeros]

I am working on the same project.
search.refresh() gives an Uncaught TypeError: search.refresh is not a function.
search.helper.search() doesn't give an error, but it doesn't show new results corresponding with the text in the search box

This is the whole code:

 $( document ).ready(function() {

            var search = instantsearch({
              appId: 'XXX',
              apiKey: 'XXX,
              indexName: 'Article'
            });

            search.addWidget(
              instantsearch.widgets.searchBox({
                container: '#search-box',
                placeholder: 'Suchen...',
                autofocus: false,
                hitsPerPage: 0
              })
            );

            search.addWidget(
              instantsearch.widgets.infiniteHits({
                container: '#hits-container',
                empty: "Keine Produkte gefunden.",
                showMoreLabel: 'Mehr Produkte anzeigen',
                templates: {
                  item: '<a href="{{product_url_to}}?search={{query}}" class="searchresult">' +
                          '<div class="thumbnail">' +
                          '<h3>{{{_highlightResult.product_subject.value}}}</h3>'+
                          '<img src="{{{product_thumb}}}">' +
                          '</div>'
                },
                hitsPerPage: 12
              })
            );

            search.start();

            $('#search_modal').on('shown.bs.modal', function (event) {
              $(this).find('#search-box').focus().val("Lampe");
              search.refresh();
              $('.ais-infinite-hits--showmore').addClass('btn mooris-show-more');
              onRenderHandler();
            });

[Haroenv]

The helper workaround should be search.helper.clearCache().search(), sorry for that mistake. Could you make that snippet into a complete sandbox with the HTML too please?

[hilkeros]

I pushed your suggestion on our staging environment:
https://mooris-store-staging.herokuapp.com

It doesn't refresh the search results.

Click the search icon in the upper right corner. We store your last search term in the session or, if you are logged in, on your user record in the database. When the search modal opens, we prefill the search field with your last search term. We just can't make it work that it loads the Algolia search results for this search term

[Haroenv]

Thanks for that reproduction @hilkeros, very useful. Even more useful would be editing this template with your modal logic so we can figure out where the refreshing should happen

[Haroenv]

Hello @hilkeros, I saw you use an old version of InstantSearch, can you update please? search.helper.clearCache().search() should work however though

[bobylito]

@hilkeros Did you solve your issue?

[hilkeros]

Sorry, we have other priorities at the moment. I'll come back to it later.

2018-01-31 14:39 GMT+01:00 Alex S [e-mail]:

@hilkeros https://github.com/hilkeros Did you solve your issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/algolia/instantsearch.js/issues/2670#issuecomment-361934592,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJpcsF4t2tTPRN20NGObrm557IYnatEks5tQG0GgaJpZM4Rp4bm
.

[bobylito]

Sorry, we have other priorities at the moment. I'll come back to it later.

Ok. I'm closing this one for now. Please do open a new issue if you haven't been able to solve your issue. Thanks :)

[hilkeros]

Reopening this one. I think we have the newest version right now on https://mooris-store-staging.herokuapp.com. The css is not very nice now, but just checking whether the refresh or clear cache works. it doesn't.

What might be the problem?

Click the search icon in the upper right corner. We store your last search term in the session or, if you are logged in, on your user record in the database. When the search modal opens, we prefill the search field with your last search term. We just can't make it work that it loads the Algolia search results for this search term

[bobylito]

In order to control the a search using InstantSearch, you need to feed the Helper the correct values. Changing the UI directly won't work.

From what I understand of your case and given that the function that will read the last search term used is called getLastSavedSearch, you'd have :

search.helper
  .clearCache()
  .setQuery(getLastSavedSearch())
  .search();

Let me know if this works for you @hilkeros

[hilkeros]

That does the trick. Thanks!