Stay organized with collections
Save and categorize content based on your preferences.
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 Examples
The search starting callback can modify the query before it is used for the search.
The Programmable 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.
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.
Results Ready Callback Examples
Word Cloud
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.
Two Part Callback Example
The results ready and results rendered callbacks can be used in combination to pass information from the former to the latter.
For example, the information in the array of result objects is available to the results ready callback, but not results rendered callback.
By saving that information to an array as part of the results ready callback we can make it accessible to the results rendered callback.
One example of this is to bypass the preview panel shown when an image result is clicked.
With a two-part callback we can have the image results link directly to the corresponding websites rather than display an image preview when clicked.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-08-21 UTC."],[[["This page provides various examples of using Search Element callbacks to customize Google Custom Search Engine behavior."],["The examples demonstrate how to modify queries, result displays, and implement custom rendering logic using JavaScript."],["Executable code samples are available via JSFiddle for interactive experimentation and learning."],["Callbacks can be used to add functionalities such as word clouds, result formatting, and altering page navigation."],["Two-part callbacks allow sharing data between the `results ready` and `results rendered` stages for complex customizations."]]],[]]