Handling empty queries

How do I change https://4isrn.csb.app/ to hide search results when no input has been entered, i have tried integrating the code (pasted below) on https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/js/ but can’t it get to work

const search = instantsearch({
  searchFunction(helper) {
    const container = document.querySelector('#results');
    container.style.display = helper.state.query === '' ? 'none' : '';

    helper.search();
  }
});

Hi Tom!

You need to adapt the code form the documentation to your own code. In the docs example, we target an element with id #results, but in your sandbox, the container for the hits has id #hits. Therefore, the code must be:

const search = instantsearch({
  // ...
  searchFunction(helper) {
    const container = document.querySelector('#hits'); // `#hits` instead of `#results`
    container.style.display = helper.state.query === '' ? 'none' : '';

    helper.search();
  }
});

Here’s a fork of your example: https://codesandbox.io/s/black-cdn-qf7ic?file=/src/app.js

As you can see, we don’t display the results at all until there’s a query.

Thank you Sarah, that works great now!