Confluence HTML宏中点击按钮如何在同页加载自定义谷歌搜索演示结果

完全可以实现该需求，所有代码可整合到同一个HTML宏中，无需额外创建其他文档，修改后的完整代码如下：

<div id="central" style="text-align: center; margin-top: 100px;">
  <img src="https://www.google.com/images/srpr/logo5w.png" title="Google" style="margin-bottom: 20px;">
  <form onsubmit="return false;">
    <input type="text" id="search-input" title="Search" placeholder="例如：WordPress hosting" style="width: 500px; padding: 10px; border-radius: 24px; border: 1px solid #dfe1e5; margin-bottom: 20px;">
    <br>
    <input type="button" onclick="showSearchResults()" value="Google Search" style="padding: 8px 16px; margin: 0 4px; border: 1px solid #f8f9fa; background: #f8f9fa; border-radius: 4px; cursor: pointer;">
    <input type="button" onclick="showLuckyResult()" value="I'm feeling lucky" style="padding: 8px 16px; margin: 0 4px; border: 1px solid #f8f9fa; background: #f8f9fa; border-radius: 4px; cursor: pointer;">
  </form>
  <!-- 搜索结果容器 默认隐藏 -->
  <div id="search-results" style="margin: 40px auto; width: 700px; text-align: left; display: none;">
    <h3 style="color: #1a0dab; font-size: 18px; margin-bottom: 4px;"><a href="替换为你的目标链接1" target="_self" style="text-decoration: none;">第一个搜索结果标题</a></h3>
    <p style="color: #006621; font-size: 14px; margin: 0 0 8px 0;">结果1的链接路径展示文本</p>
    <p style="color: #545454; font-size: 14px; margin: 0 0 24px 0;">这是第一个搜索结果的描述内容，你可以自定义调整，模拟谷歌搜索结果的展示样式。</p>
    
    <h3 style="color: #1a0dab; font-size: 18px; margin-bottom: 4px;"><a href="替换为你的目标链接2" target="_self" style="text-decoration: none;">第二个搜索结果标题</a></h3>
    <p style="color: #006621; font-size: 14px; margin: 0 0 8px 0;">结果2的链接路径展示文本</p>
    <p style="color: #545454; font-size: 14px; margin: 0 0 24px 0;">这是第二个搜索结果的描述内容，你可以根据需要增减结果数量、修改所有文本和跳转链接。</p>
  </div>
  <!-- 手气不错专属结果容器 默认隐藏 -->
  <div id="lucky-result" style="margin: 40px auto; width: 700px; text-align: left; display: none;">
    <h3 style="color: #1a0dab; font-size: 18px; margin-bottom: 4px;"><a href="替换为手气不错目标链接" target="_self" style="text-decoration: none;">手气不错专属结果标题</a></h3>
    <p style="color: #006621; font-size: 14px; margin: 0 0 8px 0;">手气不错结果的链接路径展示文本</p>
    <p style="color: #545454; font-size: 14px; margin: 0 0 24px 0;">这是点击手气不错后展示的专属结果内容，你可以自定义修改。</p>
  </div>
</div>

<script>
function showSearchResults() {
  // 隐藏手气不错结果（如果之前展示过）
  document.getElementById('lucky-result').style.display = 'none';
  // 展示普通搜索结果
  document.getElementById('search-results').style.display = 'block';
  // 如果需要根据用户输入的关键词匹配不同结果，可以在这里加判断逻辑
  // 示例：let keyword = document.getElementById('search-input').value; 可根据keyword的值展示对应结果
}

function showLuckyResult() {
  // 隐藏普通搜索结果（如果之前展示过）
  document.getElementById('search-results').style.display = 'none';
  // 展示手气不错结果
  document.getElementById('lucky-result').style.display = 'block';
}
</script>

核心调整说明 #

• 将原有submit类型按钮改为button类型，同时给表单加了onsubmit="return false"，彻底避免默认提交导致的页面跳转
• 新增了两个结果展示容器，默认隐藏，点击对应按钮后展示对应内容，完全在当前页加载
• 样式和原生谷歌搜索结果高度对齐，你可以直接修改容器内的标题、链接、描述文本，也可以自行增减结果条目
• 如果需要实现输入不同关键词展示不同结果，只需要在JS函数中增加对应关键词判断逻辑即可

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