חיפוש דוגמאות לקריאה חוזרת (callback)
הקריאה החוזרת (callback) של החיפוש מתחיל יכולה לשנות את השאילתה לפני שהיא משמשת לחיפוש. אפשר להגדיר את Programmable Search Engine כך שיכלול מונחים שנקבעו מראש בשאילתה, אבל הקריאה החוזרת (callback) הזו יכולה לשנות את השאילתה על סמך כל מידע שזמין להתקשרות חזרה מותאמת אישית.
הקריאה החוזרת (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) לאחר עיבוד, לא לפעול לפי התוצאות.
התוצאות עובדות – המערכת מזהה שאנחנו מציגים את הדף האחרון של תוצאות, וקופצת התראה שמזכירה למשתמש שהוא הגיע לסוף הסרטון.
<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>ההדגמה הזו של הקריאה החוזרת (callback) שמעובדת מגדילה את גודל הגופן של סמן מספרים שבוחרים דפי תוצאות.
גודל הגופן שמוגדר כברירת מחדל הוא 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>הקריאה החוזרת (callback) של התוצאות שעברו עיבוד משנה את הקישורים לדפים ב"סמן" ממספרים לאותיות.
<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) של התוצאות מוכנות הוא הצגת תוצאות חיפוש
פורמט שיהיה קשה להגיע אליו באמצעות הקריאה החוזרת (callback) של התוצאות שעברו רינדור כדי לתקן
HTML. הקריאה החוזרת (callback) של התוצאות מוכנות מתחילה עם div ריק.
דוגמה אחת במסמך Search Element API
הראו איך להשתמש בקריאה חוזרת (callback) כדי ליצור גרסה פשוטה מאוד של התוצאות.
דוגמה נוספת
הראה איך לשמור את נתוני התוצאות של הקריאה החוזרת (callback) של התוצאות המוכנות ולהעביר אותם
קריאה חוזרת (callback) של התוצאות שעברו רינדור, שבו אפשר להשתמש בו כדי לקשט את התוצאות הרגילות
מסך.
הקריאה החוזרת (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) בשני חלקים, אנחנו יכולים לקבל קישור בין תוצאות התמונות ישירות לאתרים המתאימים, במקום להציג תצוגה מקדימה של תמונה כשלוחצים עליה.
<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>