Arama Başlangıcı Geri Çağırma Örnekleri
Arama başlatma geri çağırması, sorguyu aramada kullanılmadan önce değiştirebilir. Programlanabilir Arama Motoru, sorguya önceden belirlenmiş terimleri dahil edecek şekilde yapılandırılabilir, ancak bu geri çağırma, geri çağırma için kullanılabilen herhangi bir bilgiye göre sorguyu değiştirebilir. işlevini kullanın.
Aşağıdaki arama başlatma geri çağırması, her sorguyu geçerli günle birleştirir. .
<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'ye şu öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Oluşturulan Sonuçlar İçin Geri Arama Örnekleri
Oluşturulan geri çağırma sonuçları, sonuçlarla doldurulduktan sonra sayfayı değiştirmek için uygundur. Geri çağırmaya gerek kalmadan sonuçların görünümünü değiştirmeyi kolaylaştırmak üzere tasarlanmıştır. tüm sorumluluğu üstlenirler.
Aşağıdaki örneklerde, oluşturulan geri çağırma işleminin iki sonuçlar üzerinde işlem yapmayın.
Bu sonuçlar oluşturulan geri çağırma, son sayfayı görüntülediğimizi bildirir bir uyarı görüntüler ve kullanıcıya sonucun sona erdiğini hatırlatan bir uyarı görüntülenmesini sağlar.
<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");
}
};Geri çağırmayı yükleyin
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'ye şu öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Bu oluşturulan sonuçlar geri çağırma demosu, "imleç" yani sonuç sayfalarını seçen sayılar.
Varsayılan yazı tipi boyutu 12 pikseldir. Burada, değeri 20 piksele çıkarıyoruz.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};Geri çağırmayı yükleyin
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'ye şu öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Bu oluşturulan sonuçlar geri çağırması, "imleç"teki sayfa bağlantılarını değiştirir. küçük harflerden faydalandığını gösterir.
<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];
}
};Geri çağırmayı yükleyin
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'ye şu öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Sonuçlar İçin Hazır Geri Arama Örnekleri
Bu geri çağırma biçimleri, değişen açık ve koyu arka planlara neden olur.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Not: Bu kod JavaScript/ES6'da yazılmıştır. Çoğu tarayıcıda çalışır, ancak ve diğer birkaç eski sürüm için JavaScript/ES5'e dönüştürülmüştür izin verir.
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'ye şu öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Kelime Bulutu
Sonuçlar hazır geri çağırmasının bariz uygulaması, arama sonuçlarını
kullanarak oluşturulan geri çağırmanın kullanılmasıyla ulaşılması zor bir biçim
HTML'ye dokunun. Sonuçlar hazır geri çağırması boş bir div ile başlar.
Search Element API dokümanında bir örnek
, sonuçların çok basit bir sürümünü oluşturmak için geri çağırmanın nasıl kullanıldığını gösterdi.
Başka bir örnek
Hazır sonuç geri çağırmasından elde edilen sonuç verilerinin nasıl tutulacağını ve kullanıcılara nasıl iletileceğini gösterdi.
standart sonuçları süslemek için kullanılabilecek oluşturulan sonuçlar geri çağırması
görüntüleyin.
Aşağıdaki sonuçlar hazır geri çağırması, arama sonuçlarının bir sonuç listesidir. Arama sonuçlarının normal görünümünün yerine geçer sonuçlarda bulunan kelimeleri içeren bir kelime bulutu başlık ve içerik. Görev listesi sonuçları, kullanıcınız için yalnızca ara bir adımdır. Bunun gibi bir geri çağırma, bu aşamayı atlayabilir ve sonuçları kullanarak kullanıcının istediği raporu sunabilir.
<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>Not: Bu kod JavaScript/ES6'da yazılmıştır. Çoğu tarayıcıda çalışır, ancak ve diğer birkaç aracı için JavaScript/ES5'e dönüştürülecektir. eski tarayıcılarda çalışır.
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'ye şu öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>İki Bölümlü Geri Arama Örneği
Sonuçlar hazır ve oluşturulan sonuçlar geri çağırmaları, bilgileri ilkinden diğerine aktarmak için birlikte kullanılabilir. Örneğin, sonuç nesneleri dizisindeki bilgiler, sonuçlar hazır geri çağırması için kullanılabilir, ancak oluşturulan sonuçlar geri çağırması için kullanılamaz. Bu bilgileri sonuçlar hazır geri çağırmasının parçası olarak bir diziye kaydederek, oluşturulan sonuçlar geri çağırması için erişilebilir hale getirebiliriz.
Buna örnek olarak, bir resim sonucu tıklandığında gösterilen önizleme panelini atlamak gösterilebilir. İki parçalı geri çağırma ile, tıklandığında bir resim önizlemesi görüntülemek yerine resim sonuçlarının, doğrudan ilgili web sitelerine yönlendirmesini sağlayabiliriz.
<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'ye şu öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>