Contoh Callback Awal Penelusuran
Callback penelusuran dimulai dapat mengubah kueri sebelum digunakan untuk penelusuran. Programmable Search Engine dapat dikonfigurasi untuk menyertakan istilah yang telah ditentukan sebelumnya dalam kueri, tetapi callback ini dapat mengubah kueri berdasarkan informasi yang tersedia untuk fungsi callback.
Callback penelusuran dimulai berikut menghiasi setiap kueri dengan hari ini 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 berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Contoh Callback yang Dirender Hasil
Callback yang dirender hasil cocok untuk mengubah halaman setelah diisi dengan hasil. Library ini dirancang untuk memudahkan modifikasi tampilan hasil tanpa mengharuskan callback untuk bertanggung jawab penuh guna merender hasil.
Contoh berikut mengilustrasikan dua penerapan dari callback yang dirender hasil dan tidak beroperasi pada hasil.
Callback hasil yang dirender ini mendeteksi bahwa kita menampilkan halaman hasil terakhir, dan memunculkan pemberitahuan yang mengingatkan pengguna bahwa mereka telah mencapai hasil 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 berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Demo callback hasil yang dirender ini meningkatkan ukuran font angka "kursor" yang memilih halaman hasil.
Ukuran font default adalah 12px. Di sini, kita meningkatkannya menjadi 20px.
<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 berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Callback hasil yang dirender ini mengubah link halaman di "kursor" dari angka menjadi 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 berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Contoh Callback Siap Hasil
Callback ini menghasilkan format yang memiliki 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. Ekstensi ini akan berjalan di sebagian besar browser, tetapi untuk Internet Explorer dan beberapa browser lama lainnya perlu dikonversi ke 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,
},
};Sertakan 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 dalam format yang akan sulit dijangkau menggunakan callback hasil yang dirender guna menyesuaikan HTML. Callback hasil siap dimulai dengan div kosong.
Salah 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 results ready dan meneruskannya ke callback hasil dirender tempat data dapat digunakan untuk mendekorasi tampilan hasil standar.
Callback results ready berikut menunjukkan bahwa hasil penelusuran tidak harus berupa daftar hasil. Fitur ini mengganti tampilan normal hasil penelusuran dengan awan kata dari kata-kata yang ditemukan di judul dan konten hasil. Jika daftar hasil hanyalah langkah perantara bagi pengguna Anda, callback seperti ini dapat mengabaikan tahap tersebut dan menggunakan hasilnya untuk menampilkan 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. Library ini akan berjalan di sebagian besar browser, tetapi perlu dikonversi ke JavaScript/ES5 untuk Internet Explorer dan beberapa browser lama lainnya.
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 berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Contoh Callback Dua Bagian
Callback hasil siap dan hasil yang dirender dapat digunakan dalam kombinasi untuk meneruskan informasi dari yang sebelumnya ke hasil yang terakhir. Misalnya, informasi dalam array objek hasil tersedia untuk callback results ready, tetapi tidak untuk callback hasil yang 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 hasil gambar ditautkan 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 berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>