I need to draw google custom search engine result and form in different div and allowOverwrite - google-custom-search

Question

I want to display the google custom search engine in two different dom.
I know about the
and
But with this option I should be able to use
allow google.search.Csedr.addOverride("mysite_");
so the searchbox-only and searchresults-only didnot fulfill the purpose.
I tried with various option , like
google.load('search', '1') and the rest as from documentation
And
<script>
(function() {
var cx = '111111111111111111:111111';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
with both this style I was failed to do the desired task.
I have use the google.setOnLoadCallback or window.__gcse both.But no hope.Can any one help me please.

Answer 1

Finally I got the solution
<!-- ON searchbox page actually header-->
<div id="search">
<script>
function mycallBack(){
google.search.Csedr.addOverride("mysite_");
}
window.__gcse = {
callback : mycallBack
};
(function() {
var cx = 'xxxxxxxxxxxxx:yyyyyyy';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<!-- Header end -->
<!-- Result page start -->
<div style="display:none"><!-- Return the unescaped result URL.-->
<div id="mysite_webResult">
<div class="gs-webResult gs-result" data-vars="{longUrl:function() {
var i = unescapedUrl.indexOf(visibleUrl);
return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}"><!-- Build the result data structure.-->
<table cellspacing="1">
<tbody>
<tr>
<td style="margin-left:30px;" valign="top"><a class="gs-title" data-attr="{href:unescapedUrl,target:target}" data-elif="typeof title !== 'undefined'" style="text-decoration:none !important;"> <img data-attr="{src:richSnippet.product.image, width:160, height:120}" data-if="typeof richSnippet !== 'undefined' && typeof richSnippet.product !== 'undefined' && typeof richSnippet.product.image !== 'undefined'" /> <img data-attr="{src:richSnippet.cseImage.src, width:160, height:120}" data-elif="typeof richSnippet !== 'undefined' && typeof richSnippet.cseImage !== 'undefined' && typeof richSnippet.cseImage.src !== 'undefined'" /> </a></td>
<td style="width:40px;"></td>
<td valign="top"><!-- Append results within the table cell.-->
<div class="gs-title" style="text-decoration:none; font-family:'ubuntu' sans-sertif;"> </div>
<div class="gs-snippet" data-body="html(content)" style="margin-bottom:30px;"></div>
<div data-if="Vars.richSnippet && typeof richSnippet.product !== 'undefined' && richSnippet.product.productid" style="color:#676767"><span class="gs-product-code-label" style="font-size:13px;font-weight:bold;color:black;">Product code: </span></div>
<div data-if="Vars.richSnippet && typeof richSnippet.product !== 'undefined' && richSnippet.product.oepartnumber" style="color:#676767"><span class="gs-oeproduct-code-label" style="font-size:13px;font-weight:bold;color:black;">OE Part Numbers: </span></div>
<div data-if="Vars.richSnippet && typeof richSnippet.offer !== 'undefined' && richSnippet.offer.price" style="color:#676767"><span class="gs-offer-price-label" style="font-size:20px;font-weight:bold;color:red;">£</span></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<gcse:searchresults-only></gcse:searchresults-only>
<!-- Result page end -->