หน้านี้ประกอบด้วยตัวอย่างต่างๆ ของการใช้โค้ดเรียกกลับสำหรับ Search Element ซึ่งจะเสริมกับตัวอย่างที่อยู่ใน
ส่วนโค้ดเรียกกลับ ของเอกสาร Custom Search Element API
หมายเหตุ: ตัวอย่างที่ดำเนินการได้ในหน้านี้จะทำงานในเว็บไซต์ JSFiddle มองหาปุ่ม jsfiddle ที่ด้านบนขวาของโค้ดบล็อก การกดแป้นพิมพ์จะเปิดหน้า JSFiddle ที่มีตัวอย่างแสดงในแผง HTML
, JavaScript
, css
และrun โดยจะเริ่ม "alive" ดังนั้นเพียงแค่ป้อนคำค้นหาในช่องค้นหาที่แสดงในแผงการเรียกใช้และการเรียกใช้กลับจะทำงาน
ตัวอย่างในเอกสารนี้จะแบ่งออกเป็นส่วนต่างๆ ตามประเภทและหน้าที่ แต่มีดังนี้
ทุกส่วนของตัวอย่างจะส่งไปยัง JSFiddle ร่วมกัน
แต่ละส่วนของตัวอย่างมีปุ่ม JSFiddle ทุกคนล้วนทำสิ่งเดียวกัน
เนื่องจากนี่คือ JSFiddle คุณจึงเล่นโดยใช้โค้ดได้ ระบบจะไม่เผยแพร่การเปลี่ยนแปลงที่ดำเนินการใน JSFiddle กลับไปยังเอกสารนี้
ตัวอย่างโค้ดเรียกกลับที่เริ่มต้นในการค้นหา
โค้ดเรียกกลับการเริ่มต้นการค้นหา จะแก้ไขคําค้นหาก่อนที่จะใช้สําหรับการค้นหาได้
คุณกำหนดค่า 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,
},
};
รวมองค์ประกอบเหล่านี้ไว้ใน HTML
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
ตัวอย่างโค้ดเรียกกลับที่แสดงผล
โค้ดเรียกกลับที่แสดงผลนั้นเหมาะสำหรับการแก้ไขหน้าเว็บหลังจากสร้างผลลัพธ์แล้ว
เทมเพลตนี้ออกแบบมาเพื่อให้คุณแก้ไขการแสดงผลลัพธ์ได้ง่ายๆ โดยไม่ต้องมีการโค้ดเรียกกลับให้มีหน้าที่รับผิดชอบโดยสมบูรณ์ในการแสดงผลผลลัพธ์
ตัวอย่างต่อไปนี้แสดงให้เห็นแอปพลิเคชัน 2 รายการของผลลัพธ์ที่แสดงผลการเรียกกลับที่ไม่ทำงานกับผลลัพธ์
ระบุหน้าผลลัพธ์สุดท้าย
โค้ดเรียกกลับที่แสดงผล นี้จะแจ้งเตือนว่าเรากำลังแสดงผลหน้าสุดท้าย และจะแสดงการแจ้งเตือนให้ผู้ใช้ทราบว่ากำลังมาถึงจุดสิ้นสุดแล้ว
<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>
การเพิ่มขนาดแบบอักษรของลิงก์ "เคอร์เซอร์"
การสาธิตการเรียกกลับผลลัพธ์ที่แสดง นี้จะเพิ่มขนาดแบบอักษรของหมายเลข "เคอร์เซอร์" ที่เลือกหน้าผลลัพธ์
ขนาดแบบอักษรเริ่มต้นคือ 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,
},
};
รวมองค์ประกอบเหล่านี้ไว้ใน 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 สําหรับ Internet Explorer และเบราว์เซอร์รุ่นเก่าอื่นๆ อีก 2-3 รายการ
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>
ภาพกลุ่มคำ
การใช้งานที่ชัดเจนของโค้ดเรียกกลับผลลัพธ์พร้อม คือการแสดงผลการค้นหาในรูปแบบที่จะเข้าถึงได้ยากโดยใช้โค้ดเรียกกลับผลลัพธ์ที่แสดงผล เพื่อปรับแต่ง HTML โค้ดเรียกกลับผลลัพธ์พร้อม จะเริ่มต้นด้วย div
ที่ว่างเปล่า
ตัวอย่าง 1 รายการ ในเอกสาร Search Element API แสดงวิธีใช้โค้ดเรียกกลับเพื่อแสดงผลการค้นหาเวอร์ชันที่เรียบง่ายมากๆ
อีกตัวอย่างหนึ่ง แสดงให้เห็นวิธีคงข้อมูลผลลัพธ์จากโค้ดเรียกกลับผลลัพธ์พร้อม และส่งไปยังโค้ดเรียกกลับผลลัพธ์ที่แสดงผล ซึ่งจะใช้ตกแต่งการแสดงผลลัพธ์มาตรฐานได้
โค้ดเรียกกลับผลลัพธ์พร้อม ต่อไปนี้แสดงให้เห็นว่าผลการค้นหาไม่จำเป็นต้องเป็นรายการผลการค้นหา โดยจะแทนที่การแสดงผลการค้นหาตามปกติด้วย Word Cloud ของคำที่พบในชื่อและเนื้อหาของผลการค้นหา เมื่อรายการผลลัพธ์เป็นเพียงขั้นตอนกลางสำหรับผู้ใช้ โค้ดเรียกกลับในลักษณะนี้จะข้ามขั้นตอนดังกล่าวไปได้ และใช้ผลลัพธ์เพื่อนำเสนอรายงานที่ผู้ใช้ต้องการ
สร้าง Word Cloud จากเนื้อหาผลการค้นหา
<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 และเบราว์เซอร์รุ่นเก่าอื่นๆ อีก 2-3 รายการ
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>
ตัวอย่างโค้ดเรียกกลับแบบ 2 ส่วน
ผลลัพธ์พร้อม และผลลัพธ์ที่แสดงผล สามารถใช้ร่วมกันเพื่อส่งต่อข้อมูลจากรายการเก่าไปยังรายการหลังได้
ตัวอย่างเช่น ข้อมูลในอาร์เรย์ของออบเจ็กต์ผลลัพธ์จะพร้อมใช้งานสำหรับโค้ดเรียกกลับผลลัพธ์ที่พร้อม แต่จะไม่มีการเรียกกลับแสดงผล
การบันทึกข้อมูลดังกล่าวในอาร์เรย์เป็นส่วนหนึ่งของโค้ดเรียกกลับผลลัพธ์พร้อม จะทำให้เราสามารถทำให้การเรียกกลับผลลัพธ์ที่แสดงผล เข้าถึงได้
ตัวอย่างหนึ่งคือการข้ามแผงแสดงตัวอย่างที่แสดงเมื่อมีการคลิกผลการค้นหารูปภาพ
การใช้โค้ดเรียกกลับแบบ 2 ส่วนจะทำให้เราสามารถแสดงผลลัพธ์ที่เป็นรูปภาพโดยตรงไปยังเว็บไซต์ที่เกี่ยวข้อง แทนที่จะแสดงตัวอย่างรูปภาพเมื่อคลิก
ข้ามการแสดงตัวอย่างรูปภาพ
<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>