Aramayı Başlatma Geri Arama Örnekleri
Aramaya başlama geri çağırma işlevi, sorguyu aramada kullanılmadan önce değiştirebilir. Programlanabilir Arama Motoru, sorguya önceden belirlenmiş terimleri içerecek şekilde yapılandırılabilir ancak bu geri çağırma, sorguyu geri çağırma işlevinin kullanabileceği bilgilere göre değiştirebilir.
Aşağıdaki search starting geri çağırma işlevi, her sorguyu haftanın geçerli günüyle süsler.
<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 aşağıdaki öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Bu örnekte, search starting geri çağırması kullanılarak Son Aramalar özelliğinin nasıl uygulanacağı gösterilmektedir.
Bu özellik, arama tetiklendiğinde kullanıcı sorgularını yakalar ve bunları tarayıcıda yerel olarak depolar. Bu sorgular daha sonra tıklanabilir öğeler olarak gösterilir. Böylece kullanıcılar önceki aramaları hızlıca tekrarlayabilir, kullanılabilirlik artar ve tekrarlanan yazma işlemi azalır.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
Son aramaları localStorage içinde saklamak için yardımcı işlevi, kullanıcı izni kontrolüyle korunan şekilde tanımlayın:
// For this demo, consent is assumed to be granted.
// In production, integrate this with your site's Consent Management Platform (CMP).
window.__hasStorageConsent = true;
function hasStorageConsent() {
return window.__hasStorageConsent === true;
}
function saveRecentSearch(query) {
if (!query || !hasStorageConsent()) return;
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Invalid localStorage data, resetting:", e);
// searches remains [] to overwrite the corrupted data
}
searches = searches.filter(item => item !== query);
searches.unshift(query);
searches = searches.slice(0, 5);
try {
localStorage.setItem("recentSearches", JSON.stringify(searches));
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
}
Arama başlatma geri aramasını kaydedin. Geri çağırmalar, cse.js yüklenmeden önce genel __gcse nesnesine kaydedilmelidir:
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
starting: function (gname, query) {
saveRecentSearch(query);
renderRecentSearches();
return query; // continue normal search
},
},
};
Son aramaları tıklanabilir öğeler olarak oluşturacak bir işlev tanımlayın ve sayfa yüklendiğinde bu işlevi başlatın:
function renderRecentSearches() {
const container = document.getElementById("recent-searches");
if (!container) return;
if (!hasStorageConsent()) {
container.innerHTML = "";
try {
localStorage.removeItem("recentSearches");
} catch(e) {}
return;
}
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
container.innerHTML = "";
searches.forEach(q => {
const item = document.createElement("button");
item.type = "button";
item.textContent = q;
item.onclick = () => {
const input = document.querySelector("input.gsc-input");
const button = document.querySelector("button.gsc-search-button");
if (input) input.value = q;
if (button) button.click();
};
container.appendChild(item);
});
}
window.addEventListener("DOMContentLoaded", function () {
renderRecentSearches();
});
HTML'ye aşağıdaki öğeleri ekleyin:
<style>
#recent-searches button {
display: inline-block;
margin-right: 8px;
margin-top: 4px;
padding: 2px 8px;
background-color: #f1f3f4;
border: 1px solid #dadce0;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
</style>
<div class="gcse-search"></div>
<div id="recent-searches"></div>
Sınırlamalar
- Veriler yalnızca tarayıcıda (
localStorage) depolanır ve kullanıcı izni gerektirir. - Cihazlar veya kullanıcılar arasında paylaşılmaz.
- Tarayıcı depolama alanı temizlenirse temizlenir.
- Bu sayfa dışında yapılan aramaları izlemez.
Oluşturulan Sonuçlar Geri Çağırma Örnekleri
Oluşturulan sonuçlar geri çağırması, sonuçlarla doldurulduktan sonra sayfayı değiştirmek için uygundur. Bu işlev, sonuçların oluşturulmasıyla ilgili tüm sorumluluğu geri çağırma işlevinin almasını gerektirmeden sonuçların gösterimini kolayca değiştirecek şekilde tasarlanmıştır.
Aşağıdaki örneklerde, sonuçlar üzerinde çalışmayan, oluşturulan sonuçlar geri çağırma işlevinin iki uygulaması gösterilmektedir.
Bu results rendered geri çağırma işlemi, sonuçların son sayfasını gösterdiğimizi fark eder ve kullanıcıya sonuca ulaştığını hatırlatan bir uyarı gösterir.
<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 aramayı yükleme
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 aşağıdaki öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Bu results rendered geri çağırma işlevi demosu, sonuç sayfalarını seçen "imleç" sayılarının yazı tipi boyutunu artırır.
Varsayılan yazı tipi boyutu 12 pikseldir. Burada 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 aramayı yükleme
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 aşağıdaki öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Bu results rendered geri çağırma işlevi, "imleç"teki sayfa bağlantılarını sayılardan harflere değiştirir.
<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 aramayı yükleme
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 aşağıdaki öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Sonuçlar Hazır Geri Arama Örnekleri
Bu geri çağırma, sonuçları açık ve koyu arka planlarla biçimlendirir.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Not: Bu kod JavaScript/ES6 ile yazılmıştır. Çoğu tarayıcıda çalışır ancak Internet Explorer ve diğer bazı eski tarayıcılarda JavaScript/ES5'e dönüştürülmesi gerekir.
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 aşağıdaki öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Kelime Bulutu
results ready geri çağırmasının en belirgin uygulaması, HTML'yi ayarlamak için results rendered geri çağırması kullanılarak ulaşılması zor bir biçimde arama sonuçlarını görüntülemektir. Sonuçlar hazır geri çağırma işlemi boş bir div ile başlar.
Search Element API dokümanındaki bir örnekte, sonuçların çok basit bir sürümünü oluşturmak için geri çağırmanın nasıl kullanılacağı gösteriliyordu.
Başka bir örnekte, results ready geri çağırma işleminden elde edilen sonuç verilerinin nasıl tutulacağı ve standart sonuç ekranını süslemek için kullanılabileceği results rendered geri çağırma işlemine nasıl geçirileceği gösterildi.
Aşağıdaki results ready geri çağırma, arama sonuçlarının sonuç listesi olması gerekmediğini gösterir. Arama sonuçlarının normal gösterimini, sonuçların başlıklarında ve içeriğinde bulunan kelimelerin kelime bulutuyla değiştirir. Sonuç listesi, kullanıcınız için yalnızca ara bir adımsa bu 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 ile yazılmıştır. Çoğu tarayıcıda çalışır ancak Internet Explorer ve diğer bazı eski tarayıcılarda JavaScript/ES5'e dönüştürülmesi gerekir.
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 aşağıdaki öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>İki bölümlü geri çağırma örneği
results ready ve results rendered geri çağırmaları, bilgilerini birinden diğerine aktarmak için birlikte kullanılabilir. Örneğin, sonuç nesneleri dizisindeki bilgiler results ready geri çağırma işlevinde kullanılabilir ancak results rendered geri çağırma işlevinde kullanılamaz. Bu bilgileri results ready geri çağırma işlevinin bir parçası olarak bir dizide kaydederek results rendered geri çağırma işlevine erişilebilir hale getirebiliriz.
Buna bir örnek, bir resim sonucu tıklandığında gösterilen önizleme panelini atlamaktır. İki bölümlü geri çağırma ile, görsel sonuçları tıklandığında görsel önizlemesi göstermek yerine doğrudan ilgili web sitelerine bağlanabilir.
<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 aşağıdaki öğeleri ekleyin:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>