Contoh Callback Memulai Penelusuran
Callback search starting 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 apa pun yang tersedia untuk fungsi callback.
Callback search starting berikut menghiasi setiap kueri dengan hari dalam seminggu saat ini.
<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 ini dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Contoh ini menunjukkan cara menerapkan fitur Penelusuran Terbaru menggunakan callback mulai penelusuran.
Fitur ini merekam kueri pengguna saat penelusuran dipicu dan menyimpannya secara lokal di browser. Kueri ini kemudian ditampilkan sebagai item yang dapat diklik, sehingga pengguna dapat mengulangi penelusuran sebelumnya dengan cepat, meningkatkan kegunaan, dan mengurangi pengetikan berulang.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
Tentukan fungsi bantuan untuk menyimpan penelusuran terbaru di localStorage, yang dilindungi oleh
pemeriksaan izin pengguna:
// For this demo, consent is assumed to be granted.
// In production, integrate this with your site's Consent Management Platform (CMP).
window.__hasStorageConsent = true;
function hasStorageConsent() {
return window.__hasStorageConsent === true;
}
function saveRecentSearch(query) {
if (!query || !hasStorageConsent()) return;
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Invalid localStorage data, resetting:", e);
// searches remains [] to overwrite the corrupted data
}
searches = searches.filter(item => item !== query);
searches.unshift(query);
searches = searches.slice(0, 5);
try {
localStorage.setItem("recentSearches", JSON.stringify(searches));
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
}
Daftarkan callback mulai penelusuran. Callback harus didaftarkan di objek
__gcse global sebelum memuat cse.js:
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
starting: function (gname, query) {
saveRecentSearch(query);
renderRecentSearches();
return query; // continue normal search
},
},
};
Tentukan fungsi untuk merender penelusuran terbaru sebagai item yang dapat diklik dan lakukan inisialisasi saat pemuatan halaman:
function renderRecentSearches() {
const container = document.getElementById("recent-searches");
if (!container) return;
if (!hasStorageConsent()) {
container.innerHTML = "";
try {
localStorage.removeItem("recentSearches");
} catch(e) {}
return;
}
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
container.innerHTML = "";
searches.forEach(q => {
const item = document.createElement("button");
item.type = "button";
item.textContent = q;
item.onclick = () => {
const input = document.querySelector("input.gsc-input");
const button = document.querySelector("button.gsc-search-button");
if (input) input.value = q;
if (button) button.click();
};
container.appendChild(item);
});
}
window.addEventListener("DOMContentLoaded", function () {
renderRecentSearches();
});
Sertakan elemen ini dalam HTML:
<style>
#recent-searches button {
display: inline-block;
margin-right: 8px;
margin-top: 4px;
padding: 2px 8px;
background-color: #f1f3f4;
border: 1px solid #dadce0;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
</style>
<div class="gcse-search"></div>
<div id="recent-searches"></div>
Batasan
- Data hanya disimpan di browser (
localStorage) dan memerlukan izin pengguna. - Tidak dibagikan antarperangkat atau pengguna.
- Dihapus jika penyimpanan browser dihapus.
- Tidak melacak penelusuran yang dilakukan di luar halaman ini.
Contoh Callback Hasil yang Dirender
Callback hasil yang dirender berguna untuk mengubah halaman setelah diisi dengan hasil. Dirancang agar mudah mengubah tampilan hasil tanpa memerlukan callback untuk bertanggung jawab sepenuhnya dalam merender hasil.
Contoh berikut mengilustrasikan dua penerapan callback hasil yang dirender yang tidak beroperasi pada hasil.
Callback hasil yang dirender ini memperhatikan bahwa kita menampilkan halaman hasil terakhir, dan memunculkan pemberitahuan 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");
}
};Instal 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 ini 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 12 piksel. Di sini, kita akan menaikkannya menjadi 20 px.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};Instal 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 ini 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];
}
};Instal 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 ini 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. Library ini akan berjalan di sebagian besar browser, tetapi harus dikonversi ke JavaScript/ES5 untuk Internet Explorer dan beberapa browser lama lainnya.
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 ini dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Awan Kata
Penerapan callback results ready yang jelas adalah untuk menampilkan hasil penelusuran dalam
format yang sulit dijangkau menggunakan callback results rendered untuk mengubah
HTML. Callback hasil siap dimulai dengan div kosong.
Satu contoh dalam dokumen Search Element API menunjukkan cara menggunakan callback untuk merender hasil versi yang sangat sederhana.
Contoh lain
menunjukkan cara menyimpan data hasil dari callback hasil siap dan meneruskannya ke
callback hasil dirender yang dapat digunakan untuk menghias tampilan hasil
standar.
Callback results ready berikut menunjukkan bahwa hasil penelusuran tidak harus berupa daftar hasil. Fitur ini menggantikan tampilan normal hasil penelusuran dengan awan kata dari kata-kata yang ditemukan dalam judul dan konten hasil. Jika daftar hasil hanyalah langkah perantara bagi pengguna Anda, callback seperti ini dapat melewati tahap tersebut dan menggunakan hasil untuk menyajikan 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 harus 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 ini 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 callback pertama ke callback kedua. Misalnya, informasi dalam array objek hasil tersedia untuk callback hasil siap, 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 dirender.
Salah satu contohnya adalah melewati panel pratinjau yang ditampilkan saat hasil gambar diklik. Dengan callback dua bagian, kami dapat membuat link hasil gambar langsung menuju 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 ini dalam HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>