本頁涵蓋各種搜尋元素回呼的範例。用來補充
自訂 API 的
「回呼」部分 中的範例
Search Element API 文件。
注意:
本頁面的執行範例是在 JSFiddle 網站上執行
網站。找到「jsfiddle」按鈕
,在
建立在程式碼區塊右上角按下 JSFiddle 頁面會顯示範例
在 HTML
、JavaScript
、css
和 run 窗格中。這項服務
而是會在「執行」窗格和回呼中顯示的搜尋框中輸入查詢內容。
或任何可執行 Knative 的環境中
本文件的範例根據本身的類型和功能分成不同部分,不過:
範例的所有部分會一起傳送至 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>
結果轉譯回呼範例
結果轉譯的回呼適用於在填入結果後修改網頁。
這個設計可讓您輕鬆修改結果顯示方式,而不必呼叫
您仍須全權負責轉譯結果
以下範例說明結果回呼的兩個應用程式,
不會針對結果執行任何操作。
識別最近結果頁面
這個結果已轉譯 的回呼通知是要顯示最後一頁
的結果,同時彈出警示,提醒使用者已經到達網站。
<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>
放大「遊標」的字型大小連結
此結果轉譯 回呼示範會增加
"cursor"。
預設字型大小為 12 像素。這次我們把它提高為 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>
使用字母做為「遊標」標籤
這個結果轉譯 回呼會變更「遊標」中的網頁連結
從數字到字母
<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 編寫而成。可在大多數瀏覽器中執行,但
轉換成 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 準備好 回呼很明顯的應用方式,就是以下列內容顯示搜尋結果:
難以透過結果顯示 回呼調整
HTML。results Ready 回呼是從空白 div
開始。
Search 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 編寫而成。可在大多數瀏覽器中執行,但
會轉換為 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 準備好」 和「結果算繪」 回呼可以搭配使用,將先前的資訊傳送至後者。
例如,結果物件陣列中的資訊可供 results prepare 回呼取得,但結果已算繪 回呼。
只要將該項資訊儲存至陣列中,做為 resultsready 回呼的一部分,我們就能讓結果顯示 回呼存取此資訊。
例如略過使用者點選圖片搜尋結果時顯示的預覽面板。
透過兩個部分的回呼,我們可以將圖片結果直接連結至對應的網站,而不是在使用者按下時顯示圖片預覽。
略過圖片預覽
<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>