खोज के शुरुआती कॉलबैक के उदाहरण
खोज शुरू करना कॉलबैक, क्वेरी का इस्तेमाल किए जाने से पहले उसमें बदलाव कर सकता है. 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 और कुछ अन्य पुराने ब्राउज़र का इस्तेमाल करें.
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>