网站嵌入带固定附加字符串的Google搜索功能代码需求

纯前端实现方案（无需后端） #

直接用HTML表单结合JavaScript，在用户提交搜索请求前自动拼接预设的固定字符串，再跳转到Google搜索结果页。

<!-- 自定义Google搜索表单 -->
<form id="customGoogleSearch" action="https://www.google.com/search" method="get" target="_blank">
  <input type="text" name="q" id="searchQuery" placeholder="输入搜索关键词..." required>
  <button type="submit">搜索</button>
</form>

<script>
document.getElementById('customGoogleSearch').addEventListener('submit', function(e) {
  // 替换成你需要的固定附加字符串
  const fixedSuffix = 'awesome pics';
  const queryInput = document.getElementById('searchQuery');
  const userQuery = queryInput.value.trim();

  if (userQuery) {
    // 拼接用户输入与固定字符串
    queryInput.value = `${userQuery} ${fixedSuffix}`;
  } else {
    // 用户未输入内容时，直接搜索固定字符串
    queryInput.value = fixedSuffix;
  }
});
</script>

关键说明 #

• action="https://www.google.com/search"：指定表单提交到Google的搜索接口
• name="q"：Google搜索的核心参数名，必须保持一致才能正常触发搜索
• 监听表单submit事件，在提交前修改输入框内容，确保固定字符串被自动附加
• target="_blank"：让搜索结果在新标签页打开，不需要可直接移除
• 可自行添加CSS样式美化表单，比如调整输入框、按钮的尺寸、颜色等

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