Ví dụ về lệnh gọi lại bắt đầu tìm kiếm
Lệnh gọi lại bắt đầu tìm kiếm có thể sửa đổi truy vấn trước khi dùng cho tìm kiếm. Bạn có thể định cấu hình Công cụ tìm kiếm có thể lập trình để đưa các từ khoá được xác định trước vào truy vấn, nhưng lệnh gọi lại này có thể sửa đổi truy vấn dựa trên bất kỳ thông tin nào có sẵn cho hàm gọi lại.
Lệnh gọi lại bắt đầu tìm kiếm sau đây trang trí mỗi truy vấn bằng ngày hiện tại trong tuần.
<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,
},
};Đưa các phần tử sau vào HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ví dụ về lệnh gọi lại được hiển thị kết quả
Bạn nên sử dụng lệnh gọi lại kết quả để sửa đổi trang sau khi trang đó đã có kết quả. Mã này được thiết kế để giúp bạn dễ dàng sửa đổi chế độ hiển thị kết quả mà không cần gọi lại để chịu toàn bộ trách nhiệm hiển thị kết quả.
Các ví dụ sau đây minh hoạ 2 ứng dụng của lệnh gọi lại được hiển thị nhưng không hoạt động trên kết quả.
Lệnh gọi lại kết quả được hiển thị này cho thấy chúng ta đang hiển thị trang kết quả cuối cùng và bật lên một cảnh báo nhắc người dùng rằng họ đã truy cập vào cuối trang.
<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");
}
};Cài đặt lệnh gọi lạ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,
},
};Đưa các phần tử sau vào HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Bản minh hoạ lệnh gọi lại kết quả được hiển thị này giúp tăng kích thước phông chữ của các số "con trỏ" chọn trang kết quả.
Cỡ chữ mặc định là 12px. Ở đây, chúng ta tăng lên 20px.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};Cài đặt lệnh gọi lạ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,
},
};Đưa các phần tử sau vào HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Lệnh gọi lại kết quả được hiển thị này sẽ thay đổi các đường liên kết của trang trong "con trỏ" từ số thành chữ cái.
<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];
}
};Cài đặt lệnh gọi lạ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,
},
};Đưa các phần tử sau vào HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ví dụ về lệnh gọi lại sẵn sàng cho kết quả
Lệnh gọi lại này định dạng được kết quả với nền sáng và tối xen kẽ.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Lưu ý: Mã này được viết bằng JavaScript/ES6. Mã này sẽ chạy trên hầu hết các trình duyệt, nhưng cần được chuyển đổi sang JavaScript/ES5 cho Internet Explorer và một số trình duyệt cũ hơn.
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,
},
};Đưa các phần tử sau vào HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Đám mây từ
Ứng dụng rõ ràng của lệnh gọi lại kết quả đã sẵn sàng là hiển thị kết quả tìm kiếm ở định dạng khó đạt được bằng cách sử dụng lệnh gọi lại kết quả được hiển thị để điều chỉnh HTML. Lệnh gọi lại kết quả đã sẵn sàng bắt đầu bằng div trống.
Một ví dụ trong tài liệu về API Phần tử tìm kiếm cho thấy cách sử dụng lệnh gọi lại để kết xuất một phiên bản kết quả rất đơn giản.
Một ví dụ khác cho thấy cách lưu giữ dữ liệu kết quả của lệnh gọi lại kết quả đã sẵn sàng và truyền dữ liệu đó đến lệnh gọi lại kết quả được hiển thị, nơi bạn có thể dùng dữ liệu này để trang trí cho màn hình kết quả chuẩn.
Lệnh gọi lại kết quả sẵn sàng sau đây cho thấy rằng kết quả tìm kiếm không nhất thiết phải là một danh sách kết quả. Phương thức này thay thế cách hiển thị thông thường của kết quả tìm kiếm bằng đám mây từ gồm các từ xuất hiện trong tiêu đề và nội dung của kết quả. Khi danh sách kết quả chỉ là bước trung gian đối với người dùng, lệnh gọi lại như thế này có thể bỏ qua giai đoạn đó và sử dụng kết quả để trình bày báo cáo mà người dùng muốn.
<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>Lưu ý: Mã này được viết bằng JavaScript/ES6. Mã này sẽ chạy trên hầu hết các trình duyệt, nhưng cần được chuyển đổi sang JavaScript/ES5 cho Internet Explorer và một vài trình duyệt cũ hơn.
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,
},
};Đưa các phần tử sau vào HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ví dụ về lệnh gọi lại hai phần
Bạn có thể sử dụng kết hợp lệnh gọi lại kết quả đã sẵn sàng và kết quả được hiển thị để chuyển thông tin từ lệnh gọi lại trước sang lệnh gọi lại sau. Ví dụ: thông tin trong mảng đối tượng kết quả có sẵn cho lệnh gọi lại kết quả có sẵn, nhưng không có sẵn cho lệnh gọi lại kết quả được hiển thị. Bằng cách lưu thông tin đó vào một mảng dưới dạng một phần của lệnh gọi lại kết quả sẵn sàng, chúng ta có thể cho phép truy cập vào lệnh gọi lại kết quả được hiển thị.
Một ví dụ cho trường hợp này là bỏ qua bảng xem trước xuất hiện khi người dùng nhấp vào kết quả tìm kiếm hình ảnh. Với lệnh gọi lại hai phần, chúng ta có thể có liên kết kết quả hình ảnh trực tiếp đến các trang web tương ứng thay vì hiển thị bản xem trước hình ảnh khi được nhấp vào.
<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,
},
};Đưa các phần tử sau vào HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>