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

i'm trying use current search form google's custom search element , far unable work. 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 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 use 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 result (which on same page), have 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 gcse:searchbox-only tag instead of current form , i'll style it; however, when press search button, goes different page , result not display in google-search-results div. if use gcse:search tag result replaces on current page , disregard line of code:

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

i have looked @ html5-valid div tags, custom search element control api (v2), , using javascript api render elements i'm unclear how go modifying code in situation can pass whatever value in input element google cse code search , i'll put result in google-search-results div. in example of custom search element control api (v2), showed code:

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

so tried following code didn't work...no result 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');      // 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 similar thread (how use custom search box google custom search?) there no resolution thread. have found thread (how style google custom search engine doesn't display block element) problem have solution whenever clicked search, go different page disregard code:

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

any appreciated. thank you.

okay, colleagues of mine, how resolved it. i'm putting here perhaps might 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 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');   } };