更多搜尋元素回呼範例

本頁提供 Search Element 回呼的使用範例。這些示例可以補充 Custom Search Element API 文件「回呼」一節中的範例。

搜尋起始回呼範例

「搜尋起始」回呼可在查詢用於搜尋前修改查詢。您可以設定程式化搜尋引擎,在查詢中加入預先定義的字詞,但這個回呼可根據回呼函式的任何可用資訊修改查詢。

下列「開始搜尋」回呼會裝飾每個查詢的當天日期。

搜尋起始回呼範例
<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>

轉譯回呼範例

算繪結果的回呼適用於在頁面填入結果後修改頁面。可讓使用者輕鬆修改結果的顯示方式,而不需要回呼必須全權負責轉譯結果。

以下範例說明兩個結果轉譯回呼的應用程式,並未對結果進行操作。

找出最後的結果頁面

這個「已轉譯的結果」回呼會通知我們顯示的是最後一頁的結果,並會彈出快訊,提醒使用者已抵達這些資訊。

<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 < 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 編寫而成。該工具可在大多數的瀏覽器上執行,但必須將 Internet Explorer 和一些其他舊版瀏覽器轉換為 JavaScript/ES5。

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>

文字雲

要用於已就緒回呼的顯性在於以「轉譯的結果」回呼難以找到的格式,調整 HTML。結果就緒回呼的起始值為空白的 divSearch Element API 文件中的其中一個範例說明如何使用回呼轉譯非常簡單的版本的結果。另一個範例說明如何保留「結果就緒」回呼中的結果資料,並將結果傳送至「已轉譯的結果」回呼,以用來裝飾標準結果的顯示方式。

下列已就緒的結果回呼顯示搜尋結果不一定要是結果清單。將搜尋結果的標題和內容字詞,替換為包含字詞的「雲端」一詞,取代正常顯示的搜尋結果。如果結果清單只是使用者的中繼步驟,這類回呼可以略過該階段,並使用結果呈現使用者想要的報表。

透過搜尋結果內容建立 Word Cloud
<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 編寫而成。這個工具可以在大多數的瀏覽器上執行,但必須將 Internet Explorer 和一些舊版瀏覽器轉換為 JavaScript/ES5。

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>

二部分回呼範例

已產生結果已轉譯的結果回呼可以搭配使用,將資訊從前者傳送至後者。舉例來說,結果已就緒的回呼可以使用結果物件陣列中的資訊,但已轉譯的結果回呼則不適用。只要將該資訊儲存至陣列,並做為已完成結果回呼的一部分,我們就能在「已轉譯的結果」回呼中存取該項資訊。

舉例來說,使用者點選圖片搜尋結果時,系統會略過顯示的預覽面板。 透過兩部分回呼,我們可以讓圖片結果直接連結至對應的網站,而不是在點選時顯示圖片預覽。

略過圖片預覽
<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>