Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

更多搜索元素回调示例

本页面包含各种使用搜索元素回调的示例。这些示例是对自定义搜索元素 API 文档的回调部分中提供的示例的补充。

注意：本页上的可执行示例在 JSFiddle 网站上运行。在代码块的右上角找到 jsfiddle 按钮

。按此按钮将打开一个 JSFiddle 页面，其中显示了 HTML、JavaScript、css 和运行窗格中的示例。它一开始处于“活跃”状态，因此只需在运行窗格中显示的搜索框中输入查询，回调就会运行。

本文档中的示例根据其类型和功能分为多个部分，但：

示例的所有部分都会一起发送到 JSFiddle
示例的每个部分都有一个 JSFiddle 按钮。它们都执行相同的操作。

由于这是 JSFiddle，您可以随意修改代码。在 JSFiddle 中所做的更改不会传播回本文档。

搜索开始回调示例

开始搜索回调可以在查询用于搜索之前对其进行修改。可编程搜索引擎可以配置为在查询中包含预先确定的字词，但此回调可以根据回调函数可用的任何信息修改查询。

以下搜索开始回调会使用当前星期几来修饰每个查询。

搜索开始回调示例

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>

const mySearchStartingCallback = (gname, query) => {
  const dayOfWeek = new Date().getDay();
  console.log(dayOfWeek);
  var days = {
        "0": "Sunday",
        "1": "Monday",
        "2": "Tuesday",
        "3": "Wednesday",
        "4": "Thursday",
        "5": "Friday",
        "6": "Saturday"
    };

    return query + ' ' + days[dayOfWeek];
};
// Install the callback.
window.__gcse || (window.__gcse = {});
  window.__gcse.searchCallbacks = {
    image: {
      starting: mySearchStartingCallback,
    },
    web: {
      starting: mySearchStartingCallback,
    },
};

在 HTML 中包含以下元素：

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

显示“最近的搜索”链接

此示例演示了如何使用搜索开始回调实现最近的搜索功能。

该功能会在触发搜索时捕获用户查询，并将其存储在浏览器本地。然后，这些查询会显示为可点击的项，以便用户快速重复之前的搜索，从而提高易用性并减少重复输入。

重要提示：根据数据隐私权法规（例如欧盟《电子隐私指令》和《一般数据保护条例》[GDPR]），使用客户端存储空间（例如 localStorage）在用户设备上存储或检索信息通常需要事先征得用户知情同意，除非这样做对于提供用户明确请求的服务是绝对必要的。由于搜索记录可能构成个人数据，并且对于基本的网站导航并非绝对必要，因此请确保您的实现符合适用的隐私权法律，在持久保留搜索查询之前征得用户的明确同意。

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>

定义辅助函数以在 localStorage 中存储最近的搜索内容，并受用户意见征求检查的保护：

      // For this demo, consent is assumed to be granted.
        // In production, integrate this with your site's Consent Management Platform (CMP).
        window.__hasStorageConsent = true;

        function hasStorageConsent() {
          return window.__hasStorageConsent === true;
        }

        function saveRecentSearch(query) {
          if (!query || !hasStorageConsent()) return;

          let searches = [];
          try {
            searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
          } catch (e) {
            console.warn("Invalid localStorage data, resetting:", e);
            // searches remains [] to overwrite the corrupted data
          }

          searches = searches.filter(item => item !== query);
          searches.unshift(query);
          searches = searches.slice(0, 5);

          try {
            localStorage.setItem("recentSearches", JSON.stringify(searches));
          } catch (e) {
            console.warn("Unable to access localStorage:", e);
          }
        }

      // Install the callback.
        window.__gcse || (window.__gcse = {});
        window.__gcse.searchCallbacks = {
          web: {
            starting: function (gname, query) {
              saveRecentSearch(query);
              renderRecentSearches();
              return query; // continue normal search
            },
          },
        };

定义一个函数，用于将近期的搜索记录呈现为可点击的项，并在网页加载时对其进行初始化：

      function renderRecentSearches() {
        const container = document.getElementById("recent-searches");
        if (!container) return;
        if (!hasStorageConsent()) {
          container.innerHTML = "";
          try {
            localStorage.removeItem("recentSearches");
          } catch(e) {}
          return;
        }
        let searches = [];
        try {
          searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
        } catch (e) {
          console.warn("Unable to access localStorage:", e);
        }
        container.innerHTML = "";
        searches.forEach(q => {
          const item = document.createElement("button");
          item.type = "button";
          item.textContent = q;
          item.onclick = () => {
            const input = document.querySelector("input.gsc-input");
            const button = document.querySelector("button.gsc-search-button");
            if (input) input.value = q;
            if (button) button.click();
          };
          container.appendChild(item);
        });
      }

      window.addEventListener("DOMContentLoaded", function () {
        renderRecentSearches();
      });

在 HTML 中包含以下元素：

      
        <style>
          #recent-searches button {
            display: inline-block;
            margin-right: 8px;
            margin-top: 4px;
            padding: 2px 8px;
            background-color: #f1f3f4;
            border: 1px solid #dadce0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
          }
        </style>
        <div class="gcse-search"></div>
        <div id="recent-searches"></div>

限制

数据仅存储在浏览器 (localStorage) 中，并且需要征得用户同意。
不会在设备或用户之间共享。
如果浏览器存储空间被清除，则会清除。
不跟踪在此网页之外进行的搜索。

呈现结果回调示例

在网页填充结果后，渲染结果回调非常适合用于修改网页。它旨在让您轻松修改结果的显示，而无需回调完全负责呈现结果。

以下示例展示了两种不处理结果的结果呈现回调应用。

识别最后一个结果页面

此 results rendered 回调会注意到我们正在显示最后一页结果，并弹出一个提醒，告知用户已到达末尾。

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

myWebResultsRenderedCallback = function(){
    var searchresults= document.getElementsByClassName("gsc-cursor-page");
    var index= document.getElementsByClassName("gsc-cursor-current-page");
    if(index.item(0).innerHTML == searchresults.length){
       alert("This is the last results page");
    }
};

安装回调

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

在 HTML 中包含以下元素：

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

增大“光标”关联的字体大小

此呈现结果回调演示会增大用于选择结果页面的“光标”数字的字体大小。

默认字体大小为 12 像素。在这里，我们将其增加到 20 像素。

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

myWebResultsRenderedCallback = function(){
   document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};

安装回调

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

在 HTML 中包含以下元素：

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

使用字母作为“光标”标签

此呈现结果回调会将“光标”中的网页链接从数字更改为字母。

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

myWebResultsRenderedCallback = function(){
    var arr = document.getElementsByClassName('gsc-cursor-page');
    var alp = ['A','B','C','D','E','F','G','H','I','J','K','L',
      'M','N','O','p','Q','R','S','T','U','V','W','X','Y','Z'];
    for (var i = 0; i &lt arr.length; i++) {
        arr[i].innerHTML = alp[i];
    }
};

安装回调

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

在 HTML 中包含以下元素：

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

“结果已准备就绪”回调示例

显示具有交替颜色背景的结果

此回调会使用交替的浅色和深色背景来设置结果的格式。

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

注意：此代码是用 JavaScript/ES6 编写的。它可在大多数浏览器上运行，但需要转换为 JavaScript/ES5 才能在 Internet Explorer 和其他一些旧版浏览器上运行。

barredResultsRenderedCallback = function(gname, query, promoElts, resultElts){
  const colors = ['Gainsboro', 'FloralWhite'];
  let colorSelector = 0;
  for (const result of resultElts) {
    result.style.backgroundColor = colors[colorSelector];
    colorSelector = (colorSelector + 1) % colors.length;
  }
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: barredResultsRenderedCallback,
  },
};

在 HTML 中包含以下元素：

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

词云图

results ready 回调的明显应用是以一种难以使用 results rendered 回调来调整 HTML 的格式显示搜索结果。结果就绪回调以空 div 开头。 搜索元素 API 文档中的一个示例展示了如何使用回调来呈现非常简单的结果版本。另一个示例展示了如何保留来自 results ready 回调的结果数据，并将其传递给 results rendered 回调，以便在其中使用该数据来修饰标准结果显示。

以下准备就绪的结果回调表明，搜索结果不一定必须是结果列表。它会用搜索结果的标题和内容中出现的字词组成的字词云替换正常的搜索结果显示。如果结果列表只是用户的中间步骤，则此类回调可以绕过该阶段，并使用结果来呈现用户所需的报告。

根据搜索结果内容创建词云

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<style>
  #container {
    width: 100%;
    height: 4.5in;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>

注意：此代码是用 JavaScript/ES6 编写的。它可在大多数浏览器上运行，但需要转换为 JavaScript/ES5 才能在 Internet Explorer 和其他一些旧版浏览器上运行。

const resultsReadyWordCloudCallback = function(
        name, q, promos, results, resultsDiv) {
    const stopWords = new Set()
      .add('a')
      .add('A')
      .add('an')
      .add('An')
      .add('and')
      .add('And')
      .add('the')
      .add('The');

    const words = {};
    const splitter = /["“”,\?\s\.\[\]\{\};:\-\(\)\/!@#\$%\^&*=\+\*]+/;
    if (results) {
        for (const {contentNoFormatting, titleNoFormatting} of results) {
            const wordArray = (contentNoFormatting + ' ' + titleNoFormatting)
              .split(splitter)
              .map(w => w.toLowerCase());
            for (const w of wordArray) {
                if (w && !stopWords.has(w)) {
                    words[w] = (words[w] + 1) || 1;
                }
            }
        }
    }
    const dataForChart = [];
    for (const key in words) {
        const val = words[key];
        dataForChart.push({
            'x': key,
            'value': val,
        });
    }

    const container = document.createElement('div');
    resultsDiv.appendChild(container);
    container.id = 'container';
    // create a tag (word) cloud chart
    const chart = anychart.tagCloud(dataForChart);
    // set a chart title
    chart.title(`Words for query: "${q}"`)
    // set an array of angles at which the words will be laid out
    chart.angles([0, 45, 90, 135])
    // display the word cloud chart
    chart.container(container);
    chart.draw();
    return true; // Don't display normal search results.
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
    web: {
        ready: resultsReadyWordCloudCallback,
    },
};

在 HTML 中包含以下元素：

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

双部分回调示例

准备就绪的结果和已呈现的结果回调可结合使用，以将信息从前者传递给后者。例如，结果对象数组中的信息可供 results ready 回调使用，但无法供 results rendered 回调使用。通过将该信息保存到数组中（作为结果就绪回调的一部分），我们可以让结果呈现回调访问该信息。

一个示例是绕过点击图片搜索结果时显示的预览面板。通过两部分回调，我们可以让图片搜索结果直接链接到相应网站，而不是在点击时显示图片预览。

跳过图片预览

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>

const makeTwoPartCallback = () => {
  let urls;
  const readyCallback = (name, q, promos, results, resultsDiv) => {
    urls = [];
    for (const result of results) {
      urls.push(result['contextUrl']);
    }
  };
  const renderedCallback = (name, q, promos, results) => {
    const removeEventListeners = element => {
      const clone = element.cloneNode(true);
      element.parentNode.replaceChild(clone, element);
      return clone;
    };
    for (let i = 0; i < results.length; ++i) {
      const element = removeEventListeners(results[i]);
      element.addEventListener('click', () => window.location.href = urls[i]);
    }
  };
  return {readyCallback, renderedCallback};
};
const {
  readyCallback: imageResultsReadyCallback,
  renderedCallback: imageResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  image: {
    ready: imageResultsReadyCallback,
    rendered: imageResultsRenderedCallback,
  },
};

在 HTML 中包含以下元素：

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

更多搜索元素回调示例 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

搜索开始回调示例

限制

呈现结果回调示例

“结果已准备就绪”回调示例

词云图

双部分回调示例

更多搜索元素回调示例