অনুসন্ধান শুরু কলব্যাক উদাহরণ
অনুসন্ধান শুরুর কলব্যাক অনুসন্ধানের জন্য ব্যবহার করার আগে অনুসন্ধানটি পরিবর্তন করতে পারে। প্রোগ্রামেবল সার্চ ইঞ্জিনকে ক্যোয়ারীতে পূর্ব-নির্ধারিত শর্তাবলী অন্তর্ভুক্ত করার জন্য কনফিগার করা যেতে পারে, কিন্তু এই কলব্যাক কলব্যাক ফাংশনে উপলব্ধ যেকোন তথ্যের উপর ভিত্তি করে ক্যোয়ারী পরিবর্তন করতে পারে।
নিম্নলিখিত অনুসন্ধান শুরু কলব্যাক সপ্তাহের বর্তমান দিনের সাথে প্রতিটি প্রশ্নের সজ্জিত করে।
<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,
},
};HTML এ এই উপাদানগুলি অন্তর্ভুক্ত করুন:
<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,
},
};HTML এ এই উপাদানগুলি অন্তর্ভুক্ত করুন:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>এই ফলাফল রেন্ডার করা কলব্যাক ডেমো ফলাফলের পৃষ্ঠাগুলি নির্বাচন করে এমন "কার্সার" নম্বরগুলির ফন্টের আকার বাড়ায়।
ডিফল্ট ফন্ট সাইজ হল 12px। এখানে, আমরা এটিকে 20px এ বাড়িয়ে দিই।
<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,
},
};HTML এ এই উপাদানগুলি অন্তর্ভুক্ত করুন:
<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,
},
};HTML এ এই উপাদানগুলি অন্তর্ভুক্ত করুন:
<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 এ লেখা। এটি বেশিরভাগ ব্রাউজারে চলবে, তবে ইন্টারনেট এক্সপ্লোরার এবং আরও কয়েকটি পুরানো ব্রাউজারগুলির জন্য 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,
},
};HTML এ এই উপাদানগুলি অন্তর্ভুক্ত করুন:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>শব্দ মেঘ
ফলাফল প্রস্তুত কলব্যাকের সুস্পষ্ট প্রয়োগ হল অনুসন্ধান ফলাফলগুলিকে এমন একটি বিন্যাসে প্রদর্শন করা যা এইচটিএমএল টুইক করার জন্য রেন্ডার করা কলব্যাক ব্যবহার করে পৌঁছানো কঠিন হবে৷ ফলাফল প্রস্তুত কলব্যাক একটি খালি div দিয়ে শুরু হয়। সার্চ এলিমেন্ট এপিআই ডকুমেন্টের একটি উদাহরণ দেখিয়েছে কিভাবে ফলাফলের একটি খুব সাধারণ সংস্করণ রেন্ডার করতে কলব্যাক ব্যবহার করুন। অন্য একটি উদাহরণ দেখিয়েছে কিভাবে ফলাফলের রেডি কলব্যাক থেকে ফলাফলের ডেটা ধরে রাখতে হয় এবং ফলাফল রেন্ডার করা কলব্যাকে পাঠাতে হয় যেখানে এটি স্ট্যান্ডার্ড ফলাফল প্রদর্শনকে সাজাতে ব্যবহার করা যেতে পারে।
নিম্নলিখিত ফলাফল প্রস্তুত কলব্যাক দেখায় যে অনুসন্ধান ফলাফল ফলাফলের একটি তালিকা হতে হবে না. এটি ফলাফলের শিরোনাম এবং বিষয়বস্তুতে পাওয়া শব্দের শব্দের মেঘ দিয়ে অনুসন্ধান ফলাফলের স্বাভাবিক প্রদর্শনকে প্রতিস্থাপন করে। যখন ফলাফলের তালিকা আপনার ব্যবহারকারীর জন্য শুধুমাত্র একটি মধ্যবর্তী ধাপ হয়, তখন এই ধরনের একটি কলব্যাক সেই পর্যায়টিকে বাইপাস করতে পারে এবং ব্যবহারকারীর চাওয়া প্রতিবেদনটি উপস্থাপন করতে ফলাফল ব্যবহার করতে পারে।
<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 এ লেখা। এটি বেশিরভাগ ব্রাউজারে চলবে, তবে ইন্টারনেট এক্সপ্লোরার এবং আরও কয়েকটি পুরানো ব্রাউজারে জাভাস্ক্রিপ্ট/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,
},
};HTML এ এই উপাদানগুলি অন্তর্ভুক্ত করুন:
<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,
},
};HTML এ এই উপাদানগুলি অন্তর্ভুক্ত করুন:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>