More Search Element Callback Examples

This page holds an assortment of examples of using Search Element callbacks. They supplement the examples found in Callbacks section of the Custom Search Element API document.

Search Starting Callback Demos

The search starting callback can modify the query before it is used for the search. The Custom Search Engine can be configured to include pre-determined terms in the query, but this callback can modify the query based on any information available to the callback function.

The following search starting callback decorates each query with the current day of week.

Search Starting Callback Example
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></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,
    },
};

Include these elements in the HTML:

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

Results Rendered Callback Examples

The results rendered callback is good for modifying the page after it's populated with results. It is designed to make it easy to modify the display of results without requiring the callback to take full responsibility for rendering the results.

The following examples illustrate two applications of the results rendered callback that do not operate on the results.

Identify Last Results Page

This results rendered callback notices that we're displaying the last page of results, and pops up an alert reminding the user that they've reached the end.

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

Install the callback

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: 'myWebResultsRenderedCallback',
  },
};

Include these elements in the HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Increasing the font size of the "cursor" links

This results rendered callback demo increases the font size of the "cursor" numbers that select pages of results.

The default font size is 12px. Here, we increase it to 20px.

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

Install the callback

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: 'myWebResultsRenderedCallback',
  },
};

Include these elements in the HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Use Letters for "Cursor" Labels

This results rendered callback changes the page links in the "cursor" from numbers to letters.

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

Install the callback

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
    web: {
        rendered: 'myWebResultsRenderedCallback',
    },
};

Include these elements in the HTML:

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

Results Ready Callback Example

The obvious application of the results ready callback is to display search results in a format that would be hard to reach using the results rendered callback to tweak the HTML. The results ready callback starts with an empty div. One example in the Search Element API document showed how use the callback to render a very simple version of results. Another example showed how to hold the results data from the results ready callback and pass it to the results rendered callback where it can be used to decorate the standard results display.

The following results ready callback shows that search results do not have to be a list of results. It replaces the normal display of search results with a word cloud of the words found in the results' titles and content. When the list of results is only an intermediate step for your user, a callback like this can bypass that stage and use the results to present the report the user wants.

Create a Word Cloud from Search Results Content
<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>

Note: This code is written in JavaScript/ES6. It will run on most browsers, but will need to be modified for Internet Explorer and a few other older browsers.

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

Include these elements in the HTML:

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