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

Bu sayfada, Search Element geri çağırma işlevinin kullanımıyla ilgili çeşitli örnekler verilmektedir. Bunlar Geri Aramalar bölümünde bulunan örnekler Search Element API dokümanı.

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. .

Arama Başlangıcı Geri Çağırma Ö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,
    },
};

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.

Son Sonuçları Belirleme Sayfası

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>
.
'nı inceleyin.
"İmleç"in yazı tipi boyutunu artırmak bağlantılar

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>
.
'nı inceleyin.
"İmleç" için Harfleri Kullanma Etiketler

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

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

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.

Arama Sonuçları İçeriğinden 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'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.

Resim önizlemelerini atlama
<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>