חיפוש דוגמאות להתקשרות חזרה
הקריאה החוזרת (callback) בתחילת החיפוש יכולה לשנות את השאילתה לפני שנעשה בה שימוש בחיפוש. אפשר להגדיר את Programmable Search Engine כך שיכלול מונחים שהוגדרו מראש בשאילתה, אבל הקריאה החוזרת הזו יכולה לשנות את השאילתה על סמך כל מידע שזמין לפונקציית הקריאה החוזרת.
כשמפעילים את הקריאה החוזרת (callback) בחיפוש שמתחיל, כל שאילתה מופיעה עם היום הנוכחי של השבוע.
<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>דוגמאות לקריאה חוזרת (callback) שעובדו
תוצאות הקריאה החוזרת (callback) המעובדות עוזרות לשינוי הדף אחרי שמתבצע בו אכלוס בתוצאות. הוא נועד להקל על שינוי התצוגה של התוצאות, בלי לדרוש קריאה חוזרת (callback) שתיקח אחריות מלאה על הצגת התוצאות.
הדוגמאות הבאות ממחישות שני יישומים של הקריאה החוזרת (callback) שהתקבלו במסגרת פונקציית ההחזרה שאינם פועלים לפי התוצאות.
הקריאה החוזרת לרינדור הזה שמה לב שאנחנו מציגים את הדף האחרון של התוצאות, ואז נפתחת התראה שמזכירה למשתמש שהוא הגיע לסוף.
<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");
}
};התקנה של הקריאה החוזרת (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,
},
};כוללים את הרכיבים הבאים ב-HTML:
<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';
};התקנה של הקריאה החוזרת (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,
},
};כוללים את הרכיבים הבאים ב-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];
}
};התקנה של הקריאה החוזרת (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,
},
};כוללים את הרכיבים הבאים ב-HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>דוגמאות לקריאה חוזרת (callback) מוכנות
הפורמט של הקריאה החוזרת (callback) שמתקבל מתחלף עם רקעים בהירים וכהים.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>הערה: הקוד הזה נכתב ב-JavaScript/ES6. הוא יפעל ברוב הדפדפנים, אבל יהיה עליך להמיר אותו ל-JavaScript/ES5 ב-Internet Explorer ובכמה דפדפנים ישנים יותר.
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>ענן מילים
היישום הברור של קריאה חוזרת (callback) תוצאות מוכנות הוא להציג תוצאות חיפוש בפורמט שקשה להגיע אליו באמצעות הקריאה החוזרת לתוצאות עיבוד כדי לשנות את ה-HTML. הקריאה החוזרת (callback) לתוצאות מוכנות מתחילה ב-div ריק.
דוגמה אחת במסמך Search Element API הראתה כיצד להשתמש ב-callback כדי לעבד גרסה פשוטה מאוד של תוצאות.
דוגמה נוספת הראתה כיצד לשמור את נתוני התוצאות מהקריאה החוזרת התוצאות מוכנות ולהעביר אותם אל הקריאה החוזרת לתוצאות שעובדו, שבה ניתן להשתמש בהם כדי לקשט את תצוגת התוצאות הרגילה.
הקריאה החוזרת לתוצאות המוכנות הבאה מראה שתוצאות החיפוש לא חייבות להיות רשימה של תוצאות. גרסה זו מחליפה את התצוגה הרגילה של תוצאות החיפוש בענן מילים של המילים שבכותרות ובתוכן של התוצאות. כשרשימת התוצאות היא רק שלב ביניים מבחינת המשתמש, קריאה חוזרת כזו יכולה לעקוף את השלב הזה ולהשתמש בתוצאות כדי להציג את הדוח שהמשתמש רוצה.
<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. הוא יפעל ברוב הדפדפנים, אבל יהיה עליך להמיר אותו ל-JavaScript/ES5 ב-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,
},
};כוללים את הרכיבים הבאים ב-HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>דוגמה לקריאה חוזרת (callback) בשני חלקים
ניתן להשתמש בקריאות חוזרות (callback) מסוג תוצאות מוכנות ותוצאות שעברו עיבוד בשילוב כדי להעביר מידע מהראשון לאחר. לדוגמה, המידע במערך האובייקטים של התוצאות זמין לקריאה חוזרת (callback) מסוג תוצאות מוכנות, אבל לא לקריאה חוזרת (callback) של תוצאות שעובדו. אנחנו שומרים את המידע הזה במערך כחלק מהקריאה החוזרת לתוצאות, כדי שהוא יהיה נגיש לקריאה חוזרת (callback) התוצאות שעובדו.
אחת הדוגמאות לכך היא לעקוף את חלונית התצוגה המקדימה שמוצגת כשלוחצים על תוצאת תמונה. בעזרת קריאה חוזרת (callback) בשני חלקים, אנחנו יכולים לקשר את התוצאות של התמונות ישירות לאתרים המתאימים, במקום להציג תצוגה מקדימה של התמונה כשלוחצים עליה.
<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>