如何为可编程Google Search（谷歌自定义搜索）的搜索框预填内容

实现方案 #

Google CSE 没有提供原生的自定义属性直接预填搜索词，你可以通过官方暴露的加载回调配合自定义属性实现，代码改动极小，符合你要求的通过div属性配置的需求。

完整代码示例如下：

<!-- 原有谷歌自定义搜索引入逻辑保持不变 -->
<script async src="https://cse.google.com/cse.js?cx=partner-pub-xxx:yyy"></script>
<div class="gcse-search" data-presearch-query="str1 str2 str3"></div>

<!-- 新增预填逻辑 -->
<script>
window.__gcse = {
  callback: () => {
    const presetQuery = document.querySelector('.gcse-search').dataset.presearchQuery
    const cseInput = document.querySelector('.gsc-input input.gsc-input')
    if (cseInput && presetQuery) {
      cseInput.value = presetQuery
    }
  }
}
</script>

说明：

• __gcse.callback是谷歌官方提供的CSE组件加载完成回调，能保证执行逻辑时搜索框已经渲染完成，不会出现找不到DOM的问题
• 你只需要修改data-presearch-query属性的取值即可调整预填内容，无需改动JS逻辑
• 不影响原有搜索功能的所有交互，用户可以直接对预填内容进行增删改后再执行搜索

内容的提问来源于stack exchange，提问作者FedKad