खोज शुरू करने के लिए कॉलबैक के उदाहरण
search starting कॉलबैक, खोज के लिए इस्तेमाल की जाने वाली क्वेरी में बदलाव कर सकता है. Programmable Search Engine को क्वेरी में पहले से तय किए गए शब्दों को शामिल करने के लिए कॉन्फ़िगर किया जा सकता है. हालांकि, यह कॉलबैक, कॉलबैक फ़ंक्शन के लिए उपलब्ध किसी भी जानकारी के आधार पर क्वेरी में बदलाव कर सकता है.
यहां दिया गया search starting कॉलबैक, हर क्वेरी को हफ़्ते के मौजूदा दिन के हिसाब से सजाता है.
<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>इस उदाहरण में, search starting कॉलबैक का इस्तेमाल करके, हाल ही की खोजें सुविधा को लागू करने का तरीका बताया गया है.
यह सुविधा, खोज शुरू होने पर उपयोगकर्ता की क्वेरी कैप्चर करती है. साथ ही, उन्हें ब्राउज़र में स्थानीय तौर पर सेव करती है. इसके बाद, इन क्वेरी को क्लिक किए जा सकने वाले आइटम के तौर पर दिखाया जाता है. इससे उपयोगकर्ता पिछली खोजों को तुरंत दोहरा सकते हैं. इससे इस्तेमाल में आसानी होती है और बार-बार टाइप करने की ज़रूरत नहीं पड़ती.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
हाल ही की खोजों को localStorage में सेव करने के लिए, हेल्पर फ़ंक्शन तय करें. इसे उपयोगकर्ता की सहमति की जांच से सुरक्षित किया जाता है:
// 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);
}
}
search starting कॉलबैक को रजिस्टर करें. cse.js को लोड करने से पहले, कॉल बैक को ग्लोबल __gcse ऑब्जेक्ट में रजिस्टर करना होगा:
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
starting: function (gname, query) {
saveRecentSearch(query);
renderRecentSearches();
return query; // continue normal search
},
},
};
हाल ही में की गई खोजों को क्लिक किए जा सकने वाले आइटम के तौर पर रेंडर करने के लिए, एक फ़ंक्शन तय करें और उसे पेज लोड होने पर शुरू करें:
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();
});
एचटीएमएल में इन एलिमेंट को शामिल करें:
<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>
सीमाएं
- डेटा सिर्फ़ ब्राउज़र (
localStorage) में सेव किया जाता है. इसके लिए, उपयोगकर्ता की सहमति लेना ज़रूरी है. - इसे अलग-अलग डिवाइसों या उपयोगकर्ताओं के साथ शेयर नहीं किया जाता.
- अगर ब्राउज़र का स्टोरेज मिटा दिया जाता है, तो यह कुकी भी मिट जाती है.
- यह कुकी, इस पेज के बाहर की गई खोजों को ट्रैक नहीं करती.
नतीजे रेंडर होने के कॉलबैक के उदाहरण
नतीजे रेंडर होने के बाद, पेज में बदलाव करने के लिए, resultsRendered कॉलबैक का इस्तेमाल किया जा सकता है. इसे इस तरह से डिज़ाइन किया गया है कि नतीजों को दिखाने के तरीके में आसानी से बदलाव किया जा सके. इसके लिए, कॉलबैक को नतीजों को रेंडर करने की पूरी ज़िम्मेदारी लेने की ज़रूरत नहीं होती.
यहां रेंडर किए गए नतीजों के कॉलबैक के दो ऐसे इस्तेमाल के उदाहरण दिए गए हैं जो नतीजों पर काम नहीं करते.
नतीजे रेंडर किए गए कॉलबैक से पता चलता है कि हम नतीजों का आखिरी पेज दिखा रहे हैं. साथ ही, यह एक सूचना दिखाता है, जिसमें उपयोगकर्ता को याद दिलाया जाता है कि वह आखिरी पेज पर पहुंच गया है.
<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>वर्ड क्लाउड
results ready कॉलबैक का इस्तेमाल, खोज के नतीजों को ऐसे फ़ॉर्मैट में दिखाने के लिए किया जाता है जिसे results rendered कॉलबैक का इस्तेमाल करके एचटीएमएल में बदलाव करके पाना मुश्किल होता है. नतीजे तैयार हैं कॉलबैक की शुरुआत, खाली div से होती है.
Search Element API दस्तावेज़ में एक उदाहरण दिया गया था. इसमें बताया गया था कि नतीजों का बहुत ही आसान वर्शन रेंडर करने के लिए, कॉलबैक का इस्तेमाल कैसे किया जाता है.
एक अन्य उदाहरण में बताया गया है कि results ready कॉलबैक से मिले नतीजों के डेटा को कैसे सेव किया जाए और उसे results rendered कॉलबैक को कैसे पास किया जाए. इससे स्टैंडर्ड नतीजों को बेहतर तरीके से दिखाया जा सकता है.
नीचे दिए गए results ready कॉलबैक से पता चलता है कि खोज के नतीजे, नतीजों की सूची के तौर पर नहीं होने चाहिए. यह खोज के नतीजों को सामान्य तरीके से दिखाने के बजाय, नतीजों के टाइटल और कॉन्टेंट में मौजूद शब्दों का वर्ड क्लाउड दिखाता है. जब नतीजों की सूची, उपयोगकर्ता के लिए सिर्फ़ एक इंटरमीडिएट चरण होती है, तो इस तरह का कॉलबैक उस चरण को बायपास कर सकता है. साथ ही, नतीजों का इस्तेमाल करके उपयोगकर्ता को उसकी ज़रूरत के हिसाब से रिपोर्ट दिखा सकता है.
<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>दो हिस्सों वाले कॉलबैक का उदाहरण
नतीजे तैयार हैं और नतीजे रेंडर किए गए कॉलबैक का इस्तेमाल एक साथ किया जा सकता है. इससे पहले वाले कॉलबैक से जानकारी को बाद वाले कॉलबैक में पास किया जा सकता है. उदाहरण के लिए, नतीजों के ऑब्जेक्ट की ऐरे में मौजूद जानकारी, results ready कॉलबैक के लिए उपलब्ध होती है, लेकिन results rendered कॉलबैक के लिए नहीं. results ready कॉलबैक के हिस्से के तौर पर, उस जानकारी को एक ऐरे में सेव करके, हम उसे results rendered कॉलबैक के लिए उपलब्ध करा सकते हैं.
इसका एक उदाहरण यह है कि इमेज के नतीजे पर क्लिक करने पर दिखने वाले झलक पैनल को बायपास किया जा सकता है. दो हिस्सों वाले कॉलबैक की मदद से, इमेज के नतीजों को सीधे तौर पर उनसे जुड़ी वेबसाइटों से लिंक किया जा सकता है. इससे, इमेज पर क्लिक करने पर उसकी झलक दिखाने के बजाय, सीधे वेबसाइट पर पहुंचा जा सकता है.
<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>