Google CSE open in new window

Question

I would like to integrate the Google Search bar into my site, and using the default code by Google CSE I have:

        <div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};

    var imageSearchOptions = {};
    imageSearchOptions['layout'] = google.search.ImageSearch.LAYOUT_POPUP;
    customSearchOptions['enableImageSearch'] = true;
    customSearchOptions['imageSearchOptions'] = imageSearchOptions;

    var customSearchControl = new google.search.CustomSearchControl(
      '003243520079760326318:WMX-1462312306', customSearchOptions);

    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    options.setAutoComplete(true);
    customSearchControl.draw('shop.htm/cse', options);
  }, true);

Followed by the style and the </div>

But I do not want the results to open on the same page, I want them to open in searchresults.htm which has the container div

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

if I put in this form:

<form action="http://www.amberantiques.com/searchresults.htm" id="cse-search-box">
    <fieldset style="border:none;">
        <input type="hidden" name="cx" value="003243520079760326318:WMX-1462312306" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="31" />
        <input type="submit" name="sa" value="Search" />
    </fieldset>
</form>

Then the form sends it to the page but doesnt run the search, but if you then use the Google bar on the page, it runs the search fine.

Basically, how do you get the google bar to open the results page?

Cheers

Answer 1

If you upgrade to the latest Google Code V2 then you can achieve this by editing code you paste to show results.

<gcse:search></gcse:search>

Change this to

<gcse:search linktarget="_parent"></gcse:search>

Answer 2

When you're building the code for your Google CSE, one of the Look and Feel options is "Two Page" - which will allow you to search on one page, and display the results on another.

Answer 3

Can you test by putting this code?

options.enableSearchboxOnly("http://www.amberantiques.com/searchresults.htm");

between this line

var options = new google.search.DrawOptions();

and this line

options.setSearchFormRoot('cse-search-form');

Then put the following code in searchresults.htm

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    function parseQueryFromUrl() {
    var queryParamName = "q";
    var search = window.location.search.substr(1);
    var parts = search.split('&');
    for (var i = 0; i < parts.length; i++) {
        var keyvaluepair = parts[i].split('=');
        if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
            return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ' '));
        }
    }
    return '';
}

google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function () {
    var customSearchControl = new google.search.CustomSearchControl(
  '003243520079760326318:WMX-1462312306', customSearchOptions);

    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
    var queryFromUrl = parseQueryFromUrl();
    if (queryFromUrl) {
        customSearchControl.execute(queryFromUrl);
    }
}, true);
</script>

If this doesn't work you can simply read the documentation provided by google. You'll get your desired information in Designing the Look and Feel with the Control Panel section. Or you may find it in Designing the Look and Feel with XML section. I think you are looking for two page layout.

Another option is to go to http://www.google.com/cse/manage/all and then use the control panel there to customize your search engine as you desire.