Loading Google Custom Search results without page refresh

Question

I would like to submit a google custom search query without reloading/refreshing the entire html page. I'm using the latest v2 gcs with the 'Results Only' layout.

Loading the gcs api, anywhere above the Search Form

<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script>
    google.load('search', '1',
        {language : 'en', style : google.loader.themes.V2_DEFAULT});
</script>

My Custom Search Form

<form onsubmit="return executeQuery();" id="cse-search-box-form-id">
    <input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/>
    <input type="submit" id="site-search-submit" value="search"/>
</form>

The gcs results script placed wherever the search results are wanted

<div id="cse" style="width: 100%;">Loading</div>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript"> 

    google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
    google.setOnLoadCallback(function() {
        var customSearchOptions = {};  
        var customSearchControl = new google.search.CustomSearchControl(
       'UNIQUE-API-KEY', customSearchOptions);
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.setAutoComplete(true);
        options.enableSearchResultsOnly(); 
        customSearchControl.draw('cse', options);
        function parseParamsFromUrl() {
            var params = {};
            var parts = window.location.search.substr(1).split('\x26');
            for (var i = 0; i < parts.length; i++) {
                var keyValuePair = parts[i].split('=');
                var key = decodeURIComponent(keyValuePair[0]);
                params[key] = keyValuePair[1] ?
                    decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
                    keyValuePair[1];

            }

            return params;

        }

        var urlParams = parseParamsFromUrl();
        var queryParamName = "q";
        if (urlParams[queryParamName]) {
            customSearchControl.execute(urlParams[queryParamName]);

        }

    }, true);

</script>

Any help is appreciated.

Thank you

UPDATE

I have implemented,

customSearchControl.execute(urlParams[queryParamName]);

and now my search form is as follows:

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]);" id="cse-search-box-form-id">
    <input type="text" name="q" id="cse-search-input-box-id" size="25" autocomplete="off"/>
    <input type="submit" id="site-search-submit" value="search"/>
</form>

However, performing a search still refreshes the entire page, which throws my initial html formatting into chaos before jquery scripts are initiated.

Thanks

UPDATE

I've added all varieties of the following in numerous combinations but either the entire page refreshes or nothing happens at all.

<form onsubmit="return executeQuery(); return false;" id="cse-search-box-form-id">

<form onsubmit="executeQuery(); return false;" id="cse-search-box-form-id">

<form onsubmit="return false; executeQuery();" id="cse-search-box-form-id">

<form onsubmit="return false; return executeQuery();" id="cse-search-box-form-id">

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); return false;" id="cse-search-box-form-id">

<form onsubmit="return executeQuery(); event.preventDefault();" id="cse-search-box-form-id">

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.preventDefault();" id="cse-search-box-form-id">

<form onsubmit="customSearchControl.execute(urlParams[queryParamName]); event.stopPropagation();" id="cse-search-box-form-id">

and so on...

Anyone have experience with this? What about the json api for further customization? Would that solve the issue of the page refreshing somehow?

Thank you

Answer 1

you need to call

customSearchControl.execute(urlParams[queryParamName]);

whenever you need to search. so use that function in onsubmit on form.

while solving this problem, I have setup it on my own website. you can check it out here.

Basically I just add submit handler to form via jquery and did all the work that google was doing inside the submit handler. works flawlessly.

Answer 2

Best option is to use JQuery to create hooks. The following code below will create a hook between the searchButton and the searchresults-only when the render is complete.

In order for this setup to work, you need to specify a gname for your element, otherwise you will not be able to find it through the google.cse.element methods. I have a live version of the code below, but I don't make promises that will be permamently live since it is hosted in my NDSU FTP.

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Google Search Customization</title>
    <script src="https://code.jquery.com/jquery-1.12.1.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <h1>Trigger an Element API v2 search through a custom textbox</h1>
    <label>Enter Search Query:</label><input id="customSearchText" type="text">
    <input id="customSearch" type="submit">
    <div style="width: 50%; float: right;">
      <gcse:searchresults-only gname="searchOnlyCSE"></gcse:searchresults-only>
    </div>
  </body>
</html>

index.js

//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
  callback: googleCSELoaded
}; 
function googleCSELoaded() {
  // The hook in question.
  $("#customSearch").click(function() {
    var searchText = $("#customSearchText").val();
    console.log(searchText);
    var element = google.search.cse.element.getElement('searchOnlyCSE');
    element.execute(searchText);
  })
}

// CSE Code. This is a free version, so please don't make too many requests.
(function() {
  var cx = '001386805071419863133:cb1vfab8b4y';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();