A simple search page using Google AJAX Search API

Casper

Attachment:

File comment: Screenshot

Cool-n-Simple-Google-AJAX-Search.gif [ 55.27 KiB | Viewed 9526 times ]

In this article I'll demonstrate how easy it is, to create a usable webpage with some advanced technologies (such as fast asynchronous web search) in a very simple way, using a public API. You can see this in action at my personal website:

Code:

http://www.kenegozi.com

Features :

A search oriented homepage that uses Google as it's engine.
To be able to search and re-search without needing to point the cursor to the search field, nor use a lot of tab keystrokes.
A simple way to search my blog.
A cool root for my personal website.

Initialization

The first thing we are going to do, is to create a minimal webpage markup:

html code

<!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>

Make room

Now we will add a search field, and make room for the search results:

html code

<div id="queryContainer">
    <input type="text" name="query" id="query" />
</div>
<div id="searchcontrol"></div><br />
<div id="branding">Author</div>

The query input field is wrapped in a div for styling purposes:
Style it up a little

We will add some css rules in order to make our page look a little bit nicer. We'd want a readable font, some space between the input query and the results, a clean look for the input, and make it all at the centered in the page
css code

<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>

We have also set the gsc-control class to maximum width. The current version of Google AJAX Search creates the results in a html element with width=300px. We want it to occupy the whole width of its container so we override Google's default setting
Applying Google's Magic

This step was assembled with the help of the Google AJAX Search API documentation, at

Code:

http://code.google.com/apis/ajaxsearch/documentation/

So we will add the next declaration to our page's <head> section:

html code

<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&amp;v=1.0&amp;key=YOUR_KEY">
</script>

Please note that "YOUR_KEY" should be replaced by a key that you can get at

Code:

http://code.google.com/apis/ajaxsearch/signup.html

Now we'd add the next javascript code to the <head> section:
javascript code

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"));
}

Adding a little DHTML Mojo

Now we'll add the ability to type anywhere on the page and get the search field updated. We'll achieve that by adding this simple javascript to the previous block:

javascript code

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();
}

Points of Interest : Get key from google, at

Code:

http://code.google.com/apis/ajaxsearch/documentation/

Code :
html code

<!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>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&amp;v=1.0&
	
amp;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>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">Author</div>
	</div>
	<div id="searchcontrol"></div>

</body>
</html>

vaithi

great nice tool.. can you tell me how do i increase the results? currently it returns only five results per page.. wanted to increase it to 20.. how do i do it? thanks..

mnmaria20

this is a very impressive and entertaining so this is one of the best so this is for the job searching which give the interested working.

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

A simple search page using Google AJAX Search API