javascripthtmlgoogle-custom-search

Pre-entered query in Google CSE (Custom Search Engine)

I'm trying to integrate Google custom search into my website using the code below:

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

This code displays a perfectly working empty search box. However I want to display the search box with a pre-entered query as well as the search results for the query.

Like this: (doesn't work)

<script async src="https://cse.google.com/cse.js?cx=aaa:bbb"></script>
<div class="gcse-searchbox" query="cats"></div>
<div class="gcse-searchresults" query="cats"></div>

Is there any HTML or JavaScript way of doing this?

Solution

  • You have to add ?q=cats to your URL.

    Please mind the Google Custom Search Ads Policy, Google do not like pre-populating the search box with terms.

    The default query parameter name for Programmable Search Engine is 'q' (without quotes). If you want to change the default Query parameter name of the Programmable Search Engine, you can do so from search engine control panel > Search features > Advanced > WebSearch Settings > Query Parameter Name.