How to load Google Custom Search results dynamically using ajax

I have an audio player on my site, so I cannot page refresh.
I am using ajax to dynamically load the content.

I have set up the google custom search, however, I cannot figure out how I would go about loading the results without a page refresh.
My code for dynamically loading content works like this.

When a link(href) is clicked, I trigger a hash change, then return false to prevent the default behaviour.

				// Trigger Hash Change
				let page = $(this).attr("href");
				window.location.hash = page;

Then I have another function that detects a hash change and will load the appropriate content.

			$(window).bind('hashchange', function () {
	
				let newHash = window.location.hash.substring(1);
									
				$("#main-content").load(newHash + " #ajax-content", function (responseTxt, statusTxt, xhr) {

				}).hide().fadeIn();
			});

The content of my search page is set up like this

<div id="main-content">
	<div id="ajax-content" title="Search">
        
                <!-- Content
                ============================================= -->
                <section id="content">
                    <div class="content-wrap">
                        <div class="container clearfix">
        
                            <gcse:searchresults-only></gcse:searchresults-only>
        
                        </div>
                    </div>
                </section><!-- #content end -->
	</div>
</div>

then for the search form I have not changed anything

<form class="top-search-form" action="search.html" method="get">
	<input type="text" name="q" class="form-control" value=""
	placeholder="Type & Hit Enter.." autocomplete="off">
</form>

I have already included the script, the search works. I was just enquiring if there is a way to do it without refreshing the page?