How do I get Google Custom Search (V2) to run right away with a preloaded search bar?

I was instructed to add GCS to the site. After I followed the instructions for creating my free GCS ( http://www.google.com/cse/sitesearch/create ) and inserted the provided fragment in the appropriate place, the search window and the button components display OK, and the user can enter the line search, start the search and see the results. So far, so good.

However, when the components are rendered for the first time, I want to be able to pass the previously entered line into the field and programmatically perform the search immediately. This bit does not work.

The code that I currently have is as follows: consisting of the provided snippet plus additional code obtained from my reading of the user search control API document ( https://developers.google.com/custom-search/docs/element ) and designed to implement "perform immediately":

<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 perform an automatic search on. When the components are displayed, the string "gname =" 2DSearch "" appears briefly and then disappears again before the search components appear, and then nothing happens.

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

I searched the internet for nothing for several hours for something else relevant.

Can someone tell me why it is not working and / or what should I do?

My apologies, I programmed a lot, but almost illiterate when it comes to HTML and javascript. thanks jim

I found that the following error is displayed on the Chrome console: Uncaught ReferenceError: google not defined

Now my code 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 also see the following:

XMLHttpRequest cannot load (insert here the jsapi link above which I am not allowed to publish). The origin (insert here the URL of my local host) is not allowed by Access-Control-Allow-Origin.

There are many links to similar errors for this entire network, each of which is slightly different, with proposed solutions related to JSON, JQUERY, AJAX, etc., but nothing I found seems to be directly related to what I ( i.e. provide my code with a file or library in which "google" is defined), and nothing I tried worked.

Talk about finding your way through a coal mine with a candle ... :) Greetings

+6
source share
2 answers

I have work with the gcse callback function (I also changed my layout in the CSE control panel to prevent default overlays).

 <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> 
+12
source

Can you submit a search query via 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 access the search page through yourdomain.com/search?term=searchword , the search results are displayed immediately.

+1
source

Source: https://habr.com/ru/post/946231/


All Articles