Diğer Search Element Geri Çağırma Örneği

Bu sayfada, Search Element geri çağırmalarının kullanımına ilişkin çeşitli örnekler bulunmaktadır. Bunlar, Custom Search Element API belgesinin Callbacks (Geri çağırmalar) bölümünde bulunan örnekleri destekler.

Arama Başlatma Geri Arama Örnekleri

Arama başlangıcı geri çağırması, arama için kullanılmadan önce sorguyu değiştirebilir. Programlanabilir Arama Motoru, sorgu içinde önceden belirlenmiş terimler içerecek şekilde yapılandırılabilir ancak bu geri çağırma işlevi, geri çağırma işlevi için mevcut olan tüm bilgilere dayanarak sorguyu değiştirebilir.

Aşağıdaki arama başlangıcı geri çağırması, her sorguyu haftanın geçerli günüyle süsler.

Geri Arama Başlangıç Örneği 
<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,
    },
};

Bu öğeleri HTML'ye ekleyin:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Sonuçlarda Oluşturulan Geri Arama Örnekleri

Oluşturulan sonuçlar geri çağırması, sonuçlarla doldurulduktan sonra sayfayı değiştirmek için kullanışlıdır. Sonuçların görüntülenmesiyle ilgili tüm sorumluluğu geri çağırmaya gerek kalmadan sonuçların görüntüsünü değiştirmeyi kolaylaştırmak için tasarlanmıştır.

Aşağıdaki örneklerde, sonuçlarda çalışmayan ve geri çağırma için oluşturulan iki uygulama gösterilmektedir.

Son Sonuçlar Sayfasını Belirleyin

Oluşturulan sonuçlar geri çağırması, sonuçların son sayfasını görüntülediğimizi fark eder ve kullanıcıya, sayfanın sona ulaştığını hatırlatan bir uyarı verir. 

<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ükle 

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,
  },
};

Bu öğeleri HTML'ye ekleyin:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
"İmleç" bağlantılarının yazı tipi boyutunu artırma

Sonuçların oluşturulduğu bu geri çağırma demosu, sonuç sayfalarını seçen "imleç" numaraları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 çağırmayı yükle 

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,
  },
};

Bu öğeleri HTML'ye ekleyin:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
"İmleç" Etiketleri için Harf Kullanın

Oluşturulan sonuçlar geri çağırmasıyla, "imleç"teki sayfa bağlantılarını sayılardan harflere dönüştürür. 

<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ükle 

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,
  },
};

Bu öğeleri HTML'ye ekleyin:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Sonuçlara Hazır Geri Arama Örnekleri

Sonuçları Alternatif Renkli Arka Planlarla Görüntüleme

Bu geri çağırma biçimi, alternatif olarak açık ve koyu arka planların elde edilmesiyle sonuçlanır. 

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

Not: Bu kod JavaScript/ES6 dilinde yazılmıştır. Çoğu tarayıcıda çalışır ancak Internet Explorer ve diğer birkaç eski tarayıcı için 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,
  },
};

Bu öğeleri HTML'ye ekleyin:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Kelime Bulutu

Sonuçlar hazır geri çağırması, bariz bir şekilde uygulama sonuçlarını, HTML'yi değiştirmek için oluşturulan sonuçlar geri çağırması kullanılarak ulaşılması zor bir biçimde göstermektir. Sonuçlar hazır geri çağırması, boş bir div ile başlar. Search Element API dokümanındaki 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österiyordu. Başka bir örnekte, sonuçlar hazır geri çağırmasından elde edilen sonuç verilerinin nasıl tutulacağı ve standart sonuç görüntüsünü süslemek için kullanılabilecek oluşturulan sonuçlara geri çağırmanın nasıl iletileceği gösterilmiştir.

Aşağıdaki sonuçlar hazır geri çağırması, arama sonuçlarının bir sonuç listesi olması gerekmediğini gösterir. Arama sonuçlarının normal görünümünü, sonuçların başlıklarında ve içeriğinde bulunan kelimelerin bir kelime bulutuyla değiştirir. Sonuç listesi kullanıcınız için yalnızca ara bir adım olduğunda bu tür bir geri çağırma söz konusu aşamayı atlayabilir ve sonuçları kullanıcının istediği raporu sunmak için kullanabilir.

Arama Sonuçları İçeriğinden Bir Kelime Bulutu Oluşturma 
<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 dilinde yazılmıştır. Çoğu tarayıcıda çalışır ancak Internet Explorer ve diğer birkaç eski tarayıcı için 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,
    },
};

Bu öğeleri HTML'ye ekleyin:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

İki Bölümlü Geri Arama Örneği

Hazır sonuçlar ve oluşturulan sonuçlar geri çağırmaları, ilkinden ikincisine bilgi aktarmak için birlikte kullanılabilir. Örneğin, sonuç nesneleri dizisindeki bilgiler, sonuçlar hazır geri çağırmasında kullanılabilir, ancak sonuçlar için oluşturulan geri çağırma işleminde 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.

Bunun bir örneği, bir görsel sonucu tıklandığında gösterilen önizleme panelini atlamaktır. İki bölümlü bir geri çağırmayla, resim sonuçlarının tıklandığında bir resim önizlemesi görüntülemek yerine, doğrudan ilgili web sitelerine bağlantı vermesini sağlayabiliriz.

Resim önizlemelerini atla 
<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,
  },
};

Bu öğeleri HTML'ye ekleyin:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>