|
|
<!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>
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet" />
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAbKU1_TiGJxAPxQNRN0Z7thQEKx5ztgmPnP8AiUB_ZtaZmH_j4xR_bAGbjyG4GamffxBhkZcRXMQE0A" type="text/javascript"></script>
<script type="text/javascript">
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();
}
</script>
<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>
</head>
<body>
<h1>My Cool'n'Simple Search Page</h1>
<p style="text-align:left"> You can type anywhere on the page, and the search results will be updated. <br />
Use ESC key to clear the search results
</p>
<br />
<br />
<div id="queryContainer">
<input type="text" name="query" id="query" /><br />
<div id="branding">Powered by Google</div>
</div>
<div id="searchcontrol"></div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
Submit an article or tip