Hide Hits If Serach Box is Empty

Hi all

I’m trying to use Algolia in my static site, I read and follow the instruction in how to get started with Algolia

Everything works like a charm, but I found that the div#hits is displaying all my json record.

What I want is the div#hits is empty and only disply the result if user add query in the search box.

I’m trying to hide the result using the code https://community.algolia.com/instantsearch.js/v1/documentation/#hide-results-on-init

			<div id="search-box">
			  <!-- SearchBox widget will appear here -->
			</div>

			<div id="hits">
				  <!-- Hits widget will appear here -->
			</div>
    
<script type="text/javascript">
    	$( document ).ready(function() {

        	const search = instantsearch({
    		  appId: 'xxxxxx',
    		  apiKey: 'xxxx',
    		  indexName: 'xxxx',
    		  urlSync: true
    		});

      // initialize SearchBox
      search.addWidget(
        instantsearch.widgets.searchBox({
          container: '#search-box',
          placeholder: 'Search for products'
        })
      );

      // initialize hits widget
      search.addWidget(
        instantsearch.widgets.hits({
          container: '#hits'
        })
      );

    var search = instantsearch({

    // hide result  
    searchFunction: function(helper) {
        var searchResults = $('.search-results');
        if (helper.state.query === '') {
          searchResults.hide();
          return;
        }
        helper.search();
        searchResults.show();
      }
    }

    		search.start();
    	});
    </script>

The problem is i cant find the searchbox after add the additional script

I have less experience with javascript. so I have no idea what wrong with the for hiding the div#hits above