更多搜尋元素回呼範例

本頁提供各種使用搜尋元素回呼的範例。這些範例可做為補充，與自訂搜尋元素 API 文件回呼部分的範例搭配使用。

搜尋開始回呼範例

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

下列 search starting 回呼會使用當週的目前日期裝飾每個查詢。

搜尋開始回呼範例
<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: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);
          }
        }

註冊「開始搜尋」回呼。回呼必須先在全域 __gcse 物件中註冊，才能載入 cse.js：

      // 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 達成。results ready 回呼會以空白 div 開頭。 Search Element 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>

兩部分回呼範例

結果就緒和結果已算繪回呼可搭配使用，將資訊從前者傳遞至後者。 舉例來說，結果物件陣列中的資訊可供「結果已備妥」回呼使用，但「結果已算繪」回呼無法使用。 將該資訊儲存至陣列，做為「結果準備就緒」回呼的一部分，即可讓「結果已算繪」回呼存取該資訊。

舉例來說，當使用者點選圖片結果時，可以略過顯示的預覽面板。 透過兩部分的回呼，圖片搜尋結果連結可直接連往對應的網站，而非在點選時顯示圖片預覽。

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