此页面由 Cloud Translation API 翻译。

更多搜索元素回调示例

本页提供了各种使用搜索元素回调的示例。它们是可以在自定义的“回调”菜单的“回调”部分中找到 Search Element API 文档。

注意：此页面上的可执行示例在 JSFiddle 网页上运行网站。找到 jsfiddle 按钮

，在代码块的右上方。按下该按钮将打开一个 JSFiddle 页面，其中显示了示例在 HTML、JavaScript、css 和 run 窗格中。它 “alive”启动，因此只需在运行窗格中显示的搜索框中输入查询和回调函数即可。

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

示例的所有部分将一起发送到 JSFiddle
该示例的每个部分都有一个 JSFiddle 按钮。它们都是一样的

由于这是 JSFiddle，您可以自行编写代码。在 JSFiddle 中所做的更改不会传播回到此文档。

搜索启动回调示例

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

以下 search starting 回调函数使用当前日期装饰每个查询。

</ph> 搜索启动回调示例

<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>

结果呈现的回调示例

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

以下示例展示了结果呈现的回调的两个应用，不会对结果执行操作。

</ph> 确定最后一个结果页

此结果呈现回调会发现我们当前显示的是最后一页结果，并弹出提醒，提醒用户已经完成了。

<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>

</ph> 增大“光标”的字体大小链接

此 resultsRendering 回调演示会增加 “游标”用于选择搜索结果页的数字。

默认字体大小为 12px。在这里，我们将范围增加到 20px。

<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>

</ph> 使用字母表示“光标”标签

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

<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 < 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>

结果准备就绪回调示例

</ph> 使用交替背景显示结果

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

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

注意：此代码使用 JavaScript/ES6 编写。它可以在大多数浏览器上运行，但需要转换成适用于 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 回调的一个重要用途是显示搜索结果，使用 resultsrender 回调来调整 HTML。results ready 回调以空的 div 开头。 Search Element API 文档中的一个示例展示了如何使用回调呈现一个非常简单的结果版本。另一个示例展示了如何保存来自 results ready 回调的结果数据并将其传递给 结果呈现回调，在此回调中可用于修饰标准结果。

以下 results ready 回调表明搜索结果不必是结果列表。它将会取代搜索结果的正常显示以及一个字词云，其中包含这些在结果中找到的字词和内容。当结果只是用户的一个中间步骤，这样的回调可以绕过该阶段并使用结果呈现用户想要的报告。

</ph> 基于搜索结果内容创建字词云

<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 回调使用，但不可用于 resultsrender 回调。将这些信息作为 results ready 回调的一部分保存到数组中，我们便可以通过 resultsrender 回调访问这些信息。

例如，系统会绕过在用户点击图片结果时显示的预览面板。通过两部分的回调，我们可以将图片结果直接链接到相应的网站，而不是在用户点击时显示图片预览。

</ph> 绕过图片预览

<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>