How to use Google Custom Search Element with existing form element?

Question

I'm trying to use my current search form with Google's custom search element and so far I am unable to get it to work. This is my current search form.

<form class="search-form" action="/search/">
    <p class="inputs">
        <label for="search-q">Search</label>
        <input type="search" id="search-q" name="search" data-gname="search"placeholder="Find what you're looking for..." value="#formatted_query#">
        <input type="submit" value="Go" class="button postfix brand-orange-bk">
    </p>
</form>

The Google CSE code snippet I use is shown below:

(function() {
    var cx = '004626212387516433456:aex2tyveipy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];

    s.parentNode.insertBefore(gcse, s);

  })();
  $('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

In the result (which is on the same page), I have the following:

<div class="row">
    <div class="small-12 medium-5 medium-push-7 large-5 large-push-7 columns" id="search-rightcol">
        <section data-searchtab="our-own-knowledgebase" class="search-panel brand-white-bk"></section>
    </div>
    <div class="small-12 medium-7 medium-pull-5 large-7 large-pull-5 columns">
        <div id="google-search-results"></div>
    </div>
</div>

I can use the gcse:searchbox-only tag instead of my current form and then I'll style it; however, when I press the search button, it goes to a different page and the result is not display in the google-search-results div. If I use the gcse:search tag then the result replaces everything on the current page and disregard this line of code:

$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

I have looked at the HTML5-valid div tags, Custom Search Element Control API (V2), and Using the JavaScript API to render elements but I'm unclear as to how I would go about modifying the code in my situation so I can simply pass whatever value is in the input element to the Google CSE code to do the search and then I'll put the result in the google-search-results div. In the example of the Custom Search Element Control API (V2), it showed this code:

var element = google.search.cse.element.getElement('element1);
element.execute('news');

So I tried the following code but it didn't work...no result is showing/returning.

(function() {
    var cx = '004626212387516433456:aex2tyveipy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    //gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
    //var s = document.getElementsByTagName('script')[0];
    var s = google.search.cse.element.getElement('search');

    // do the search:
    var searchTerm = $('##search-q').val();
    s.execute(searchTerm);

    s.parentNode.insertBefore(gcse, s);

  })();

  $('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

I have found a similar thread (How to use custom search box for google custom search?) but there is no resolution to that thread. I have also found another thread (How to style Google Custom Search Engine so that it doesn't display as a block element) but the problem I have with that solution is whenever I clicked to search, it would go to a different page disregard this code:

$('##google-search-results').html('<gcse:searchresults-only></searchresults-only>');

Any help is much appreciated. Thank you.

Answer 1

Okay, thanks to colleagues of mine, this is how we resolved it. I'm putting it here perhaps it might help others.

searchhelper.perform_google = function(){

    if(typeof(google)!='undefined'){
        google.search.cse.element.render({
            div: "google-search-results",
            tag: 'searchresults-only',
            gname: 'google-results-gname'
        });
        var element = google.search.cse.element.getElement('google-results-gname');
        var query = $('##search-q').val();
        element.execute(query);
    }
};

(function(){
    // add the google custom stuff:
    var cx = '004626212387516433456:aex2tyveipy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    //gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();

window.__gcse = {
  parsetags: 'explicit',
  callback: function(){
    searchhelper.search('all');
  }
};