title: How do you prevent search results from showing when the search term is empty in Algolia?
body: <p>I followed their <a href="https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/" rel="nofollow noreferrer">tutorial</a>, but it always shows pages of search results, even when the page is first loaded and the contents of the search box is empty. I tried adding <code>queryHook</code> and only search when the term is not blank, but it still shows search results when you load the page. In fact, the <code>queryHook</code> is not even called upon first load. It's only called when you type in the search box. How do you hide the search results <em>unless</em> the user starts typing?</p>
  
  <p><a href="https://community.algolia.com/instantsearch.js/v2/widgets/searchBox.html#usage" rel="nofollow noreferrer">https://community.algolia.com/instantsearch.js/v2/widgets/searchBox.html#usage</a></p>
  
  <p>This works, but I don't think it's the right way because it still does a search on an empty text box. Also when you reset the search terms by clicking the <code>X</code> on the right, then it doesn't hide the results (because it doesn't call <code>queryHook</code>).</p>
  
  <pre><code>    &lt;main id="results" class="collapse"&gt;
          &lt;div id="hits"&gt;&lt;/div&gt;
          &lt;div id="pagination"&gt;&lt;/div&gt;
      &lt;/main&gt;
  
    # CoffeeScript
    search.addWidget(
      instantsearch.widgets.searchBox({
        container: '#search-input',
        queryHook: (term, searchFunction) -&gt;
          console.log "term = #{term}"
          if term
            $('#results').show()
          else
            $('#results').hide()
          searchFunction(term)
  </code></pre>