Implementing search box

Once you've created your custom search engine, you can add the Custom Search Element to your site. To do this, you'll need to copy some code and paste it into your site's HTML where you want your search engine to appear.

  1. In the Control Panel click the search engine you want to use.
  2. Click Setup in the sidebar, and then click the Basics tab.
  3. In the Details section, click Get code. Copy the code and paste it into your page's HTML source code where you want the Custom Search element to appear.

The <gcse:search></gcse:search> element is a placeholder - this is where the search element (both search box and search results) will be rendered.

Try it

Trying out different layouts

On many occasions, it makes sense to have a search box appear independently from search results. A two-column layout allows you to render a search box in one area of your page (for instance in the sidebar) and display results in a different one (for instance the main area of the page).

To change the layout of your CSE go to the Look and feel section in the Control Panel and click the Layout tab. After selecting and saving the 2-column layout in the Control Panel, you also need to change the HTML code for the Search Element.

<div class="sidebar">
  Area 1 (for example a sidebar)
  <gcse:searchbox></gcse:searchbox>
</div>

<div class="main-content">
  Area 2 (for example main area of the page)
  <gcse:searchresults></gcse:searchresults>
</div>

Try it

Another interesting layout is the two-page option. It allows you to implement your own search box on one page and render the standard search results on another page using parameters in the address bar.

Select and save the two-page layout in the Control Panel. On one page, implement a stand-alone search box, changing the resultsUrl attribute to point to the url where you want to display the results.

<script>
  (function() {
    var cx = 'YOUR_ENGINE_ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only resultsUrl="YOUR_RESULTS_PAGE_URL"></gcse:searchbox-only>

Try it

To implement a stand-alone search results page, paste the results code snippet into your results page:

<script>
(function() {
  var cx = 'YOUR_ENGINE_ID';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Now you can trigger search results on this page by passing a "q" argument in the url:

http://my-results-page-url.com/?q=myQuery

Note the q=myQuery param in the address bar - this is how the <gcse:searchresults-only></gcse:searchresults-only> element knows what query results to display.

Try it

Next...

Continue to Enabling autocomplete.

Send feedback about...

Custom Search