[SOLVED] How to prefill the search box of a Programmable Google Search

How to prefill the search box of a Programmable Google Search

I have the following simple HTML code on my web page that will allow a user to do a custom Google Search:

<script async src="https://cse.google.com/cse.js?cx=partner-pub-xxx:yyy"></script>
<div class="gcse-search"></div>

The user is able to enter search entries into the search box and do the search.

However, I need to "pre-fill" the search box (which is empty by default when the page is initially displayed) with some custom entries, so that the users will be able to remove, add, or update these entries before doing their search. I haven't found the right HTML code to add to the <div> element.

I have tried the attributes listed in https://developers.google.com/custom-search/docs/element with no help. Is there a simple way to do this? Something like this:

<script async src="https://cse.google.com/cse.js?cx=partner-pub-xxx:yyy"></script>
<div class="gcse-search" data-query_string="str1 str2 str3"></div>

Solution

You can attach an event listener to window's onload. The class name that Google uses as of now for it's input textbox is gsc-input. So, you could do something like below:

<script>
    window.onload = function(){
        let input = document.querySelector('input.gsc-input');
        input.value = 'Some test search';
        input.style.removeProperty('background');   
    };
</script>