Question

In basic/default Google Custom Search Engine tool [CSE], there is a one simple Search INPUT BOX and then it renders the Output at below area, automatically.

For example, it is using following chunk of codes, to put in my page:

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxx:xxxxxxxxx';
    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:search></gcse:search>

I do not know how to split the Input and Output Elements. So how can i separate the Input Box and Output Area as i like? I mean, how can i simply Output at the other place, like <div id="myarea"> [or] bring along and output at another page’s <div>?

Answer 1

I was playing around with this recently. I think if you go to “Look and Feel” in the control panel and then under “Choose Layout” select “Two Page” and click “Save and Get Code”, you will get the result you want. It will give you two bits of code. One will be the search box () and the other will be the results (). If they are on the same page, the code that it tells you to put in the is the same so you only need it once.