Halaman ini menyimpan berbagai contoh penggunaan callback Elemen Penelusuran. Mereka melengkapi
contoh yang ditemukan di
bagian Callback pada Kustom
Dokumen Search Element API.
Catatan:
Contoh yang dapat dieksekusi di halaman ini berjalan di web JSFiddle
situs Anda. Cari tombol {i>jsfiddle<i},
, di
kanan atas blok kode. Menekannya akan membuka halaman JSFiddle dengan contoh yang ditampilkan
di panel HTML
, JavaScript
, css
, dan run . Ini
dimulai "alive", jadi cukup masukkan kueri di kotak penelusuran yang ditampilkan di panel run dan callback
yang dijalankan.
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 memiliki tombol JSFiddle. Mereka semua melakukan
hal yang sama.
Karena ini adalah JSFiddle, Anda dapat bermain-main dengan kodenya. Perubahan yang dibuat di JSFiddle tidak diterapkan
kembali ke dokumen ini.
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.
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-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.
Identifikasi Halaman Hasil Terakhir
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>
Memperbesar ukuran font "kursor" link
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>
Gunakan Huruf untuk "Kursor" Label
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
Menampilkan Hasil dengan Latar Belakang Warna Alternatif
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.
Membuat Word Cloud 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. 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.
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-elemen berikut dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>