如何为Google CSE自定义搜索设置预填查询并自动加载对应结果

算力阿峰

2026-10-1

解决方案

方案1：纯HTML实现（最简配置）

你之前的写法不生效是因为未使用Google CSE规定的属性名，也未开启自动搜索开关，替换为以下代码即可：

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

核心配置说明：

data-defaultQuery：控制搜索框默认预填的查询词
data-query：指定搜索结果默认加载的查询词
data-autoSearchOnLoad="true"：开启页面加载后自动执行搜索的开关，无需用户手动触发

方案2：JavaScript实现（兼容性更强，支持动态修改查询词）

如果HTML方案因为异步加载顺序问题不生效，或者你需要后续动态修改默认查询词，可以用官方提供的CSE回调接口实现：

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

<script>
window.__gcse = {
  callback: function () {
    // 等待CSE组件初始化完成后，触发指定关键词的搜索
    const searchInstance = google.search.cse.element.getElement('customSearch');
    searchInstance.execute('cats');
  }
};
</script>