Implementing search box

  • To add the Programmable Search Element to your site, copy the provided code from the Control Panel and paste it into your HTML where you want the search engine to appear.

  • The default layout renders both the search box and results within a single <div class="gcse-search"></div> element.

  • You can choose different layouts, like two-column or two-page, by changing settings in the Control Panel and updating the HTML code accordingly.

  • The two-column layout allows the search box and results to be displayed in different areas of a page using gcse-searchbox and gcse-searchresults divs.

  • The two-page layout requires a separate page for results, implemented using gcse-searchbox-only and gcse-searchresults-only divs and triggered by a "q" parameter in the URL.

Once you've created your Programmable Search Engine, you can add the Programmable 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. In the Basic section of the Overview page, click Get code. Copy the code and paste it into your page's HTML source code where you want the Programmable Search Element to appear.

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

<!-- Insert your own Programmable Search Engine ID here --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div class="gcse-search"></div>

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 engine go to the Layout section of the Look and feel page in the Control Panel. After selecting and saving the 2-column layout in the Control Panel, you also need to change the HTML code for the Search Element.

<!-- Insert your own Programmable Search Engine ID here --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

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 async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

Try it

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

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

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

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

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

Try it

Next...

Continue to Enabling autocomplete.