Halaman ini menyimpan berbagai contoh penggunaan callback Elemen Penelusuran. Contoh tersebut melengkapi
contoh yang ada di
bagian Callback pada dokumen
API Elemen Penelusuran Kustom.
Catatan:
Contoh yang dapat dieksekusi di halaman ini dijalankan di situs
JSFiddle . Cari tombol jsfiddle,
, di
kanan atas blok kode. Menekannya akan membuka halaman JSFiddle dengan contoh yang ditampilkan di panel HTML
, JavaScript
, css
, dan run . Jendela
akan dimulai dengan status "aktif", jadi cukup masukkan kueri di kotak penelusuran yang ditampilkan di panel run dan callback
akan berjalan.
Contoh dalam dokumen ini dibagi menjadi beberapa bagian sesuai dengan jenis dan fungsinya, tetapi:
Semua bagian dari contoh dikirim ke JSFiddle bersama-sama
Setiap bagian dari contoh ini memiliki tombol JSFiddle. Mereka semua melakukan hal yang sama.
Karena ini adalah JSFiddle, Anda dapat bermain dengan kodenya. Perubahan yang dibuat di JSFiddle tidak disebarkan
kembali ke dokumen ini.
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.
Contoh Callback Awal Penelusuran
<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.
Identifikasi Halaman Hasil Terakhir
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>
Memperbesar ukuran font link "kursor"
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>
Menggunakan Huruf untuk Label "Kursor"
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
Menampilkan Hasil dengan Latar Belakang Warna Alternatif
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.
Membuat Cloud Kata dari Konten Hasil Penelusuran
<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.
Abaikan pratinjau gambar
<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>