Contoh Callback Memulai Penelusuran
Callback awal penelusuran dapat mengubah kueri sebelum digunakan untuk penelusuran. Programmable Search Engine dapat dikonfigurasi untuk memasukkan istilah yang telah ditentukan sebelumnya dalam kueri, tetapi callback ini dapat mengubah kueri berdasarkan informasi yang tersedia untuk callback .
Callback awal penelusuran berikut menambahkan nilai tanggal untuk setiap kueri dalam seminggu.
<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,
},
};Sertakan elemen-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Contoh Callback Hasil yang Dirender
Callback hasil yang dirender cocok untuk mengubah halaman setelah diisi dengan hasil. Hal ini dirancang untuk memudahkan Anda mengubah tampilan hasil tanpa memerlukan callback bertanggung jawab penuh untuk menampilkan hasil.
Contoh berikut menggambarkan dua penerapan dari hasil callback yang dirender yang tidak beroperasi pada hasil.
Callback Hasil yang dirender ini menunjukkan bahwa kita menampilkan halaman terakhir hasil, dan memunculkan peringatan yang mengingatkan pengguna bahwa mereka telah mencapai akhir.
<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");
}
};Menginstal callback
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,
},
};Sertakan elemen-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Demo callback Hasil yang dirender ini meningkatkan ukuran font "kursor" angka yang memilih halaman hasil.
Ukuran font default adalah 12px. Di sini, kita tingkatkan menjadi 20 piksel.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};Menginstal callback
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,
},
};Sertakan elemen-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Callback Hasil yang dirender ini mengubah link halaman di "kursor" mulai dari angka hingga huruf.
<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];
}
};Menginstal callback
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,
},
};Sertakan elemen-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Contoh Callback Hasil Siap
Callback ini memformat hasil dengan latar belakang terang dan gelap yang bergantian.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Catatan: Kode ini ditulis dalam JavaScript/ES6. Ini akan berjalan di sebagian besar {i> browser<i}, tetapi akan memerlukan dikonversi ke JavaScript/ES5 untuk Internet Explorer dan beberapa browser.
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,
},
};Sertakan elemen-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Awan Kata
Penerapan yang jelas dari callback results ready adalah untuk menampilkan hasil penelusuran di
format yang akan sulit dijangkau menggunakan callback hasil yang dirender untuk menyesuaikan
HTML. Callback hasil siap dimulai dengan div kosong.
Satu contoh dalam dokumen Search Element API
menunjukkan cara menggunakan callback untuk merender versi hasil yang sangat sederhana.
Contoh lain
menunjukkan cara menyimpan data hasil dari callback hasil siap dan meneruskannya ke
callback hasil dirender tempatnya dapat digunakan untuk mendekorasi hasil standar
tampilan.
Callback results ready akan menunjukkan bahwa hasil penelusuran tidak harus menjadi daftar hasil. Mengganti tampilan normal hasil penelusuran dengan awan kata dari kata-kata yang ditemukan di hasil judul dan konten. Ketika daftar hasilnya hanyalah langkah perantara bagi pengguna Anda, callback seperti ini dapat melewati tahap tersebut dan menggunakan hasilnya untuk mempresentasikan laporan yang diinginkan pengguna.
<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>Catatan: Kode ini ditulis dalam JavaScript/ES6. Ini akan berjalan di sebagian besar {i> browser<i}, tetapi akan memerlukan dikonversi ke JavaScript/ES5 untuk Internet Explorer dan beberapa {i>browser<i} lama.
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,
},
};Sertakan elemen-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Contoh Callback Dua Bagian
Callback hasil siap dan hasil dirender dapat digunakan bersama untuk meneruskan informasi dari yang pertama ke yang kedua. Misalnya, informasi dalam array objek hasil tersedia untuk callback results ready, tetapi tidak untuk callback hasil dirender. Dengan menyimpan informasi tersebut ke array sebagai bagian dari callback hasil siap, kita dapat membuatnya dapat diakses oleh callback hasil yang dirender.
Salah satu contohnya adalah mengabaikan panel pratinjau yang ditampilkan saat hasil gambar diklik. Dengan callback dua bagian, kita dapat membuat link hasil gambar langsung ke situs yang sesuai, bukan menampilkan pratinjau gambar saat diklik.
<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,
},
};Sertakan elemen-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>