File Under: Ajax

Google Ajax Search

Here is some code you can use to add Google’s search functionality to your website. You can add both a standard Google search box that will search the web at large (the first example) or a site-specific search box that will search only pages within a specific URL (the second example). If you want to restrict searches to your own site, use the second example and provide your site’s URL as the searchable domain.

You’ll need an API key from Google. They are freely available for non-commercial applications.


General Google Search:

<!DOCTYPE html>

<head>

<meta charset="utf-8" />



		<title>My GAjax Search</title>

		<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>



		<script language="Javascript" type="text/javascript">

    	//<![CDATA[



    	function OnLoad() {

      	// Create a search control

      	var searchControl = new GSearchControl();



      	// create a search object

      	searchControl.addSearcher(new GwebSearch());

      	// tell Google where to draw the searchbox

      	searchControl.draw(document.getElementById("search-box"));



    	}

    	GSearch.setOnLoadCallback(OnLoad);



    	//]]>



		</script>

	</head>

<body>



		<!-- Search box -->



		<div id="search-box">



		</div>



</body>

</html>


Site Specific Google Search:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



	<head>

		<title>My GAjax Site Search</title>

		<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOURKEYHERE" type="text/javascript"></script>







		<script language="Javascript" type="text/javascript">

    	//<![CDATA[



    	function OnLoad() {

      	// Create a search control

      	var searchControl = new GSearchControl();



     	// create a search object

      	var siteSearch = new GwebSearch();

	  	siteSearch.setUserDefinedLabel("YourSite");

	  	siteSearch.setUserDefinedClassSuffix("siteSearch");

	  	siteSearch.setSiteRestriction("example.com");

	  	searchControl.addSearcher(siteSearch);

      	// tell Google where to draw the searchbox

      	searchControl.draw(document.getElementById("search-box"));



    	}

    	GSearch.setOnLoadCallback(OnLoad);



    	//]]>

		</script>

	</head>

	<body>



		<!-- Search box -->



		<div id="search-box">



		</div>



	</body>

</html>