Implementing search box

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.