Hide results when the algolia-search-box query is empty? instantsearch wordpress

HI all

I have added the algolia-search-box widget to my site header and trying to hide the results when the query is empty. so only when something is typed in should the results show up.

Any help on how to do this would be appreciated.

Thanks

Hi @robert1, If you want to also avoid the search request used for the initial results, we have this documentation about conditional requests which I think may work better for you than trying to hide the results. If not, let us know.

Hi Cindy,
No i think just hiding the results will work for now, I may look into your suggestion about the conditional requests at a later date when i have some more time, but thank you for the suggestion.

Hi @robert1,

Which library are you using? It would help to know which solution is appropriate.

Thank you!

Hi @samuel.vaillant

Im using " WP search with algolia" plugin which I’m currently adapting to fit. I checked with them re the conditional requests as suggested by @cindy.cullen but that is something they have not built into the instantsearch.php.

I have managed to get halfway to what I’m trying to achieve,

Currently on the page load I have set Algolia to not return any results using the searchFunction hook…
Once someone starts typing the results show up and everything is good, but when the query is then cleared - I’m trying to go back to the original URL and hide the results again.

this is what i have so far .

 var search = instantsearch({
      appId: algolia.application_id,
      apiKey: algolia.search_api_key,
      indexName: algolia.indices.posts_product.name,
      urlSync: {
        mapping: {'q': 's'},
        trackedParameters: ['query']
      },

      searchFunction: function(helper) {
        var homePage = jQuery('.home-page');
        var searchResults = jQuery('.search-results');
        var elementorInner = jQuery('.elementor-inner');

        if (helper.state.query === '') {
          // empty query string -> hide the search results & abort the search
          searchResults.hide();
          homePage.hide();
          return;

        }else {
        helper.search();
        homePage.hide();
        elementorInner.hide();
        searchResults.show();
        return;       
        }

       
      },
1 Like