如何预填充可编程 Google 搜索的搜索框

Question

我的网页上有以下简单的 HTML 代码，允许用户执行自定义 Google 搜索：

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

用户可以在搜索框中输入搜索条目并进行搜索。

但是，我需要用一些自定义条目“预填充”搜索框（页面最初显示时默认为空），以便用户能够删除、添加或更新在进行搜索之前查看这些条目。我还没有找到正确的 HTML 代码来添加到 <div> 元素。

我已经尝试了 https://developers.google.com/custom-search/docs/element 中列出的属性，但没有任何帮助。有没有简单的方法可以做到这一点？像这样：

<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>

Answer 1

您可以将事件侦听器附加到 window 的 onload。 Google 目前为其输入文本框使用的 class 名称是 gsc-input。因此，您可以执行如下操作：

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

如何预填充可编程 Google 搜索的搜索框

How to prefill the search box of a Programmable Google Search

html

php

google-search-api