A simple search page using Google AJAX Search API, and some DHTML
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>My Cool'n'Simple Search Page</title> </head> <body> <h1>My Cool'n'Simple Search Page</h1> </body> </html>
<div id="queryContainer"> <input type="text" name="query" id="query" /> </div> <div id="searchcontrol"></div><br /> <div id="branding">Powered by Google</div>
<style type="text/css"> body { font-family: verdana; text-align: center; } #queryContainer { margin-bottom:2em; width: 80%; margin-left:auto; margin-right:auto; } #query { border:1px solid silver; width: 100%; } #searchcontrol { width:80%; margin-left:auto; margin-right:auto; text-align:left; } .gsc-control { width: 100%; } </style>
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR_KEY"> </script>
var searchControl window.onload = function() { onLoad(); } function onLoad() { // Create a search control searchControl = new GSearchControl(); // add a regular web search, with a custom label 'web' var webSrearch = new GwebSearch(); webSrearch.setUserDefinedLabel("web"); searchControl.addSearcher(webSrearch); // add a site-limited web search, with a custom label var siteSearch = new GwebSearch(); siteSearch.setUserDefinedLabel("KenEgozi.com"); siteSearch.setSiteRestriction("kenegozi.com"); searchControl.addSearcher(siteSearch); // add a blog search, with a custom label var blogsSrearch = new GblogSearch(); blogsSrearch.setUserDefinedLabel("weblogs"); searchControl.addSearcher(blogsSrearch); // setting the draw mode for the Google search var drawOptions = new GdrawOptions(); // use tabbed view drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); // set the input field (instead of the default one) drawOptions.setInput(document.getElementById('query')); // actually write the needed markup to the page searchControl.draw(document.getElementById("searchcontrol"), drawOptions); // set the google logo container GSearch.getBranding(document.getElementById("branding")); }
var query = null; document.onkeydown = function(event) { kd(event); }; function kd(e) { // make it work on FF and IE if (!e) e = event; // use ESC to clear the search results if (e.keyCode == 27) searchControl.clearAllResults(); // get the input field if (query == null) query = document.getElementById('query'); // and move the focus in there query.focus(); }
Comments