This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. There are many JavaScript tutorials available on the Web.
The Custom Search Control performs AJAX Search API style web searches which are targeted to your site, or those you specify in your custom search engine. This is the easiest way to get Google Custom Search onto your website, and will take advantage of any refinements or other configurations you've made to your CSE. Here's an example, targeted to all of Google Code:
To include the Custom Search Control in your page, you will utilize the Google AJAX API loader.
The common loader allows you to load all of the AJAX APIs that you need, including the Custom Search Control. You need to both include
the Google AJAX APIs script tag and call google.load("search", "1") (to load the Search API):
|
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("search", "1");
</script>
The first script tag loads the google.load function, which lets you load individual Google APIs and
google.load("search", "1"); loads Version 1 of the Search API. Currently we're in Version 1, but new
versions may be available in the future. See the versioning discussion below for more information.
Once you've loaded the necessary APIs, you can create a Custom Search Control and add it to your div:
// Create a custom search control
var customSearchControl = new google.search.CustomSearchControl();
// Draw the control in example-div
customSearchControl.draw('example-div');
Visit our Code Playground for an example of how to load the Custom Search Control.
The Custom Search Control is fully stylable using CSS (see
result styling for more information). However, we also offer several themes which allow
customizing the look and feel without having to tweak the CSS. All you have to do is include
the name of a theme when you load the API. For instance, instead of using
google.load("search", "1"); as described above, you can use:
google.load("search", "1", {style: google.loader.themes.BUBBLEGUM});
Here is a full list of the available themes:
google.loader.themes.BUBBLEGUMgoogle.loader.themes.ESPRESSOgoogle.loader.themes.GREENSKYgoogle.loader.themes.MINIMALISTgoogle.loader.themes.SHINYHave you created your own theme that looks great? Drop by our support forum to show it off.
The second argument to google.load is the version of the API you are using. Currently the we're in version
1, but new versions may be available in the future.
If we do a significant update to the API in the future, we will change the version number and post a notice on Google Code and the AJAX APIs discussion group. When that happens, we expect to support both versions for at least a month in order to allow you to migrate your code.
The AJAX API team periodically updates the API with the most recent bug fixes and performance enhancements. These bug fixes should only improve performance and fix bugs, but we may inadvertently break some API clients. Please use the AJAX APIs discussion group to report such issues.
This object implements the google.search.CustomSearchControl interface which can perform AJAX Search API style Custom Searches targeted
to an existing or dynamic custom search engine.
| Constructor | Description |
|---|---|
|
|
The constructor is used to create an instance of a Custom Search Control object designed to provide and display Google Custom Search results.
It is bound to an html container using the .draw() method. The method accepts an optional parameter, If no parameters are specified, the Custom Search Control will automatically configure itself to search the site on which it is loaded. Instead, you can specify a Custom Search ID which will be used to determine the results of this control. You can also configure your Custom Search Control by using a Linked CSE by including the URL of the CSE specification file in the constuctor, as follows (substitute your own URL): var customSearchControl =
new google.search.CustomSearchControl({'crefUrl' : 'http://www.guha.com/cref_cse.xml'});
|
The google.search.CustomSearchControl extends the google.search.SearchControl. Therefore, the
Search Control's methods can be used here as well.
| Method | Description |
|---|---|
|
|
This method is used associate an AdSense Publisher ID to this Custom Search Control, allowing you to share in the revenue from ads shown with the results. Note: If you supplied a Custom Search ID in the constructor, you must enter your AdSense Publisher ID into the CSE Control Panel, rather than using this method.
|