खोज शुरू करने पर कॉलबैक के उदाहरण
खोज शुरू हो रही है कॉलबैक, खोज के लिए इस्तेमाल किए जाने से पहले क्वेरी में बदलाव कर सकता है. Programmable Search Engine को क्वेरी में, पहले से तय किए गए शब्दों को शामिल करने के लिए कॉन्फ़िगर किया जा सकता है. हालांकि, यह कॉलबैक फ़ंक्शन में उपलब्ध किसी भी जानकारी के आधार पर क्वेरी में बदलाव कर सकता है.
यहां दिए गए खोज शुरू होने की तारीख कॉलबैक करके, हर क्वेरी को हफ़्ते के मौजूदा दिन के हिसाब से दिखाया जाता है.
<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,
},
};एचटीएमएल में ये एलिमेंट शामिल करें:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>रेंडर किए गए नतीजों के कॉलबैक के उदाहरण
नतीजे के तौर पर मिले कॉलबैक का इस्तेमाल करके, नतीजे मिलने के बाद पेज में बदलाव किए जा सकते हैं. इसे इस तरह से डिज़ाइन किया गया है कि नतीजे दिखाने के तरीके में आसानी से बदलाव किया जा सके. इसके लिए, कॉलबैक को नतीजों को रेंडर करने की पूरी ज़िम्मेदारी लेने की ज़रूरत नहीं होती.
ये उदाहरण, रेंडर किए गए कॉलबैक के ऐसे दो ऐप्लिकेशन के बारे में बताते हैं जो नतीजों पर काम नहीं करते हैं.
रेंडर किए गए इन नतीजों के लिए कॉलबैक से पता चलता है कि हम नतीजों का आखिरी पेज दिखा रहे हैं. साथ ही, स्क्रीन पर एक सूचना पॉप-अप होती है, जो उपयोगकर्ता को यह याद दिलाती है कि वे नतीजे देख चुके हैं.
<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");
}
};कॉलबैक इंस्टॉल करें
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,
},
};एचटीएमएल में ये एलिमेंट शामिल करें:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>रेंडर किए गए नतीजे वाले इस कॉलबैक डेमो से, उन "कर्सर" नंबर के फ़ॉन्ट का साइज़ बढ़ जाता है जो नतीजों के पेज चुनते हैं.
डिफ़ॉल्ट फ़ॉन्ट साइज़ 12 पिक्सल होता है. यहां, हम इसे बढ़ाकर 20 पिक्सल कर देते हैं.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};कॉलबैक इंस्टॉल करें
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,
},
};एचटीएमएल में ये एलिमेंट शामिल करें:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>रेंडर किए गए नतीजों के इस कॉलबैक से, "कर्सर" में मौजूद पेज के लिंक, नंबर से अक्षरों में बदल जाते हैं.
<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];
}
};कॉलबैक इंस्टॉल करें
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,
},
};एचटीएमएल में ये एलिमेंट शामिल करें:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>नतीजों के लिए तैयार कॉलबैक के उदाहरण
इस कॉलबैक फ़ॉर्मैट में, अलग-अलग लाइट और गहरे रंग के बैकग्राउंड होते हैं.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>ध्यान दें: यह कोड JavaScript/ES6 में लिखा गया है. यह ज़्यादातर ब्राउज़र पर चलेगा, लेकिन इसे Internet Explorer और कुछ दूसरे पुराने ब्राउज़र के लिए 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,
},
};एचटीएमएल में ये एलिमेंट शामिल करें:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>वर्ड क्लाउड
नतीजे के लिए तैयार कॉलबैक का इस्तेमाल आम तौर पर, खोज के नतीजों को ऐसे फ़ॉर्मैट में दिखाना होता है जिन तक एचटीएमएल में बदलाव करने के लिए, रेंडर किए गए नतीजे कॉलबैक का इस्तेमाल करके, पहुंचना मुश्किल होता. नतीजे तैयार हैं कॉलबैक खाली div से शुरू होता है.
Search Element API के दस्तावेज़ के एक उदाहरण में,
दिखाया गया है कि कॉलबैक की मदद से, नतीजों का बेहद आसान वर्शन कैसे रेंडर किया जाता है.
एक अन्य उदाहरण में दिखाया गया है कि नतीजों के लिए तैयार कॉलबैक से, नतीजों के डेटा को कैसे होल्ड किया जाता है. साथ ही, उसे रेंडर किए गए नतीजों के कॉलबैक में कैसे भेजा जाता है. यहां इसका इस्तेमाल, स्टैंडर्ड नतीजों के डिसप्ले को सजावट के लिए किया जा सकता है.
नीचे दिए गए नतीजे तैयार कॉलबैक से पता चलता है कि खोज के नतीजों को नतीजों की सूची के तौर पर शामिल करना ज़रूरी नहीं है. यह खोज के नतीजों के सामान्य डिसप्ले की जगह ले लेता है. साथ ही, यह नतीजों के टाइटल और कॉन्टेंट में मिलने वाले शब्दों के क्लाउड क्लाउड को दिखाता है. जब नतीजों की सूची, आपके उपयोगकर्ता के लिए सिर्फ़ एक इंटरमीडिएट चरण होती है, तो इस तरह का कॉलबैक उस चरण को बायपास कर सकता है और उपयोगकर्ता की ज़रूरत के मुताबिक रिपोर्ट दिखाने के लिए, नतीजों का इस्तेमाल कर सकता है.
<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>ध्यान दें: यह कोड JavaScript/ES6 में लिखा गया है. यह ज़्यादातर ब्राउज़र पर चलेगा, लेकिन Internet Explorer और कुछ दूसरे पुराने ब्राउज़र के लिए इसे JavaScript/ES5 में बदलना होगा.
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,
},
};एचटीएमएल में ये एलिमेंट शामिल करें:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>दो हिस्सों में कॉलबैक का उदाहरण
तैयार नतीजे और रेंडर किए गए नतीजों के कॉलबैक का इस्तेमाल, पहले वाले से बाद वाले कॉलबैक में भेजने के लिए किया जा सकता है. उदाहरण के लिए, नतीजे वाले ऑब्जेक्ट के कलेक्शन में मौजूद जानकारी, नतीजे तैयार कॉलबैक के लिए उपलब्ध होती है, लेकिन रेंडर किए गए नतीजे कॉलबैक पर नहीं. उस जानकारी को नतीजे के लिए तैयार कॉलबैक के हिस्से के तौर पर किसी अरे में सेव करके, हम उसे रेंडर किए गए नतीजों के कॉलबैक से ऐक्सेस कर सकते हैं.
इसका एक उदाहरण यह है कि इमेज के नतीजे पर क्लिक होने पर, झलक दिखाने वाले पैनल को बायपास किया जाता है. दो-हिस्सों वाले कॉलबैक की मदद से हम इमेज के नतीजों को क्लिक करने पर इमेज की झलक दिखाने के बजाय, सीधे उनसे जुड़ी वेबसाइटों से लिंक कर सकते हैं.
<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,
},
};एचटीएमएल में ये एलिमेंट शामिल करें:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>