I've been tasked with adding GCS to a website. After I followed the instructions to create my free GCS (), and pasted the supplied snippet into the appropriate place, the search box & button components render OK and the user is able to enter a search string, run the search and see the results. So far so good.

However, when the components render for the first time I want to be able to pass a pre-entered string into the box and programmatically have the search executed immediately. This bit is not working.

The code I currently have in place is as follows, consisting of the supplied snippet plus some extra code derived from my reading of the Custom Search Element Control API doc () and intended to implement the 'execute immediate':

<div class="content-container">  
    <script type="text/javascript"> 
        (function() { 
            var cx = '(my search id)'; 
            var gcse = document.createElement('script'); 
            gcse.type = 'text/javascript'; 
            gcse.async = true; 
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
                '//www.google/cse/cse.js?cx=' + cx; 
            var s = document.getElementsByTagName('script')[0]; 
            s.parentNode.insertBefore(gcse, s); 
        })(); 
    </script> 
    <gcse:search> gname="2DSearch"</gcse:search> 
    <script type="text/javascript"> 
        var element = google.search.cse.element.getElement("2DSearch"); 
        element.prefillQuery(primarySearch); 
        element.execute(primarySearch); 
    </script> 
</div> 

primarySearch is the string I want to automatically search on. When the components render, the string 'gname="2DSearch"' appears briefly then disappears again just before the search components appear, then nothing else happens.

There appear to be some similarities here with this question (unanswered):

I have searched the Web in vain for a number of hours for anything else relevant.

Can anybody tell me why it's not working and/or what I need to do?

My apologies, I have done alot of programmming but am virtually illiterate when it comes to HTML & javascript. Thanks Jim

I discovered that the Chrome console is showing the following error: Uncaught ReferenceError: google is not defined

My code now looks like this:

<div class="content-container">
    <script type="text/javascript">
        (function() {
            var cx = '013736134253840884188:fxsx6zqql_y';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                '//www.google/cse/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
        })();
    </script>
</div>

<div class="gcse-search" data-gname="2DSearch"></div>

<div class="content-container">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var element = google.search.cse.element.getElement("2DSearch");
        element.prefillQuery(primarySearch);
        element.execute(primarySearch);
    </script>
</div>

In the console again I'm now also seeing the following:

XMLHttpRequest cannot load (insert here the jsapi link above that I'm not allowed to post). Origin (insert here the URL for my localhost) is not allowed by Access-Control-Allow-Origin.

There are numerous references to similar errors to this all over the Net, each one slightly different, with solutions proposed referring to JSON, JQUERY, AJAX etc.etc., but nothing that I have found seems directly relevant to what I am trying to do (ie make available to my code the file or library in which 'google' is defined), and nothing that I have tried has worked.

Talk about trying to find your way through a coalmine with a candle... :) Cheers

I've been tasked with adding GCS to a website. After I followed the instructions to create my free GCS (http://www.google.com/cse/sitesearch/create), and pasted the supplied snippet into the appropriate place, the search box & button components render OK and the user is able to enter a search string, run the search and see the results. So far so good.

However, when the components render for the first time I want to be able to pass a pre-entered string into the box and programmatically have the search executed immediately. This bit is not working.

The code I currently have in place is as follows, consisting of the supplied snippet plus some extra code derived from my reading of the Custom Search Element Control API doc (https://developers.google.com/custom-search/docs/element) and intended to implement the 'execute immediate':

<div class="content-container">  
    <script type="text/javascript"> 
        (function() { 
            var cx = '(my search id)'; 
            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> gname="2DSearch"</gcse:search> 
    <script type="text/javascript"> 
        var element = google.search.cse.element.getElement("2DSearch"); 
        element.prefillQuery(primarySearch); 
        element.execute(primarySearch); 
    </script> 
</div> 

primarySearch is the string I want to automatically search on. When the components render, the string 'gname="2DSearch"' appears briefly then disappears again just before the search components appear, then nothing else happens.

There appear to be some similarities here with this question (unanswered): https://stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query

I have searched the Web in vain for a number of hours for anything else relevant.

Can anybody tell me why it's not working and/or what I need to do?

My apologies, I have done alot of programmming but am virtually illiterate when it comes to HTML & javascript. Thanks Jim

I discovered that the Chrome console is showing the following error: Uncaught ReferenceError: google is not defined

My code now looks like this:

<div class="content-container">
    <script type="text/javascript">
        (function() {
            var cx = '013736134253840884188:fxsx6zqql_y';
            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>
</div>

<div class="gcse-search" data-gname="2DSearch"></div>

<div class="content-container">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        var element = google.search.cse.element.getElement("2DSearch");
        element.prefillQuery(primarySearch);
        element.execute(primarySearch);
    </script>
</div>

In the console again I'm now also seeing the following:

XMLHttpRequest cannot load (insert here the jsapi link above that I'm not allowed to post). Origin (insert here the URL for my localhost) is not allowed by Access-Control-Allow-Origin.

There are numerous references to similar errors to this all over the Net, each one slightly different, with solutions proposed referring to JSON, JQUERY, AJAX etc.etc., but nothing that I have found seems directly relevant to what I am trying to do (ie make available to my code the file or library in which 'google' is defined), and nothing that I have tried has worked.

Talk about trying to find your way through a coalmine with a candle... :) Cheers

• javascript
• search

3 Answers 3

I've got it working with the gcse callback option (I also changed my layout in the CSE Control Panel to prevent the default overlay).

<script>
function gcseCallback() {
  if (document.readyState != 'complete')
    return google.setOnLoadCallback(gcseCallback, true);
  google.search.cse.element.render({gname:'gsearch', div:'results', tag:'searchresults-only', attributes:{linkTarget:''}});
  var element = google.search.cse.element.getElement('gsearch');
  element.execute('this is my query');
};
window.__gcse = {
  parsetags: 'explicit',
  callback: gcseCallback
};
(function() {
  var cx = 'YOUR_ENGINE_ID';
  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>

<div id="results"></div>

Can you pass the search term via the URL?

<script>
  (function() {
    var cx = 'YOURID';
    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 queryParameterName="term"></gcse:searchbox>
<gcse:searchresults></gcse:searchresults>

If you call your "search" page via yourdomain.com/search?term=searchword the search results appear immediately.

<gcse:search gname='abcd'></gcse:search>

And when the page loaded:

google.search.cse.element.getElement('abcd').execute(query);