Contoh Callback Elemen Penelusuran Lainnya

Halaman ini menyimpan berbagai contoh penggunaan callback Elemen Penelusuran. Mereka melengkapi contoh yang ditemukan di bagian Callback pada Kustom Dokumen Search Element API.

Contoh Callback Memulai Penelusuran

Callback awal penelusuran dapat mengubah kueri sebelum digunakan untuk penelusuran. Programmable Search Engine dapat dikonfigurasi untuk memasukkan istilah yang telah ditentukan sebelumnya dalam kueri, tetapi callback ini dapat mengubah kueri berdasarkan informasi yang tersedia untuk callback .

Callback awal penelusuran berikut menambahkan nilai tanggal untuk setiap kueri dalam seminggu.

Contoh Callback Awal Penelusuran 
<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,
    },
};

Sertakan elemen-elemen berikut dalam HTML:

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

Contoh Callback Hasil yang Dirender

Callback hasil yang dirender cocok untuk mengubah halaman setelah diisi dengan hasil. Hal ini dirancang untuk memudahkan Anda mengubah tampilan hasil tanpa memerlukan callback bertanggung jawab penuh untuk menampilkan hasil.

Contoh berikut menggambarkan dua penerapan dari hasil callback yang dirender yang tidak beroperasi pada hasil.

Identifikasi Halaman Hasil Terakhir

Callback Hasil yang dirender ini menunjukkan bahwa kita menampilkan halaman terakhir hasil, dan memunculkan peringatan yang mengingatkan pengguna bahwa mereka telah mencapai akhir. 

<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");
    }
};

Menginstal callback 

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

Sertakan elemen-elemen berikut dalam HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Memperbesar ukuran font "kursor" link

Demo callback Hasil yang dirender ini meningkatkan ukuran font "kursor" angka yang memilih halaman hasil.

Ukuran font default adalah 12px. Di sini, kita tingkatkan menjadi 20 piksel. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
   document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};

Menginstal callback 

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

Sertakan elemen-elemen berikut dalam HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Gunakan Huruf untuk "Kursor" Label

Callback Hasil yang dirender ini mengubah link halaman di "kursor" mulai dari angka hingga huruf. 

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

Menginstal callback 

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

Sertakan elemen-elemen berikut dalam HTML:

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

Contoh Callback Hasil Siap

Menampilkan Hasil dengan Latar Belakang Warna Alternatif

Callback ini memformat hasil dengan latar belakang terang dan gelap yang bergantian. 

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

Catatan: Kode ini ditulis dalam JavaScript/ES6. Ini akan berjalan di sebagian besar {i> browser<i}, tetapi akan memerlukan dikonversi ke JavaScript/ES5 untuk Internet Explorer dan beberapa browser. 

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

Sertakan elemen-elemen berikut dalam HTML:

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

Awan Kata

Penerapan yang jelas dari callback results ready adalah untuk menampilkan hasil penelusuran di format yang akan sulit dijangkau menggunakan callback hasil yang dirender untuk menyesuaikan HTML. Callback hasil siap dimulai dengan div kosong. Satu contoh dalam dokumen Search Element API menunjukkan cara menggunakan callback untuk merender versi hasil yang sangat sederhana. Contoh lain menunjukkan cara menyimpan data hasil dari callback hasil siap dan meneruskannya ke callback hasil dirender tempatnya dapat digunakan untuk mendekorasi hasil standar tampilan.

Callback results ready akan menunjukkan bahwa hasil penelusuran tidak harus menjadi daftar hasil. Mengganti tampilan normal hasil penelusuran dengan awan kata dari kata-kata yang ditemukan di hasil judul dan konten. Ketika daftar hasilnya hanyalah langkah perantara bagi pengguna Anda, callback seperti ini dapat melewati tahap tersebut dan menggunakan hasilnya untuk mempresentasikan laporan yang diinginkan pengguna.

Membuat Word Cloud dari Konten Hasil Penelusuran 
<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>

Catatan: Kode ini ditulis dalam JavaScript/ES6. Ini akan berjalan di sebagian besar {i> browser<i}, tetapi akan memerlukan dikonversi ke JavaScript/ES5 untuk Internet Explorer dan beberapa {i>browser<i} lama. 

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

Sertakan elemen-elemen berikut dalam HTML:

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

Contoh Callback Dua Bagian

Callback hasil siap dan hasil dirender dapat digunakan bersama untuk meneruskan informasi dari yang pertama ke yang kedua. Misalnya, informasi dalam array objek hasil tersedia untuk callback results ready, tetapi tidak untuk callback hasil dirender. Dengan menyimpan informasi tersebut ke array sebagai bagian dari callback hasil siap, kita dapat membuatnya dapat diakses oleh callback hasil yang dirender.

Salah satu contohnya adalah mengabaikan panel pratinjau yang ditampilkan saat hasil gambar diklik. Dengan callback dua bagian, kita dapat membuat link hasil gambar langsung ke situs yang sesuai, bukan menampilkan pratinjau gambar saat diklik.

Abaikan pratinjau gambar 
<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,
  },
};

Sertakan elemen-elemen berikut dalam HTML:

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