Click here to Skip to main content
15,867,780 members
Articles / Web Development / HTML

A cool'n'simple search page using Google AJAX Search API, and some DHTML

Rate me:
Please Sign up or sign in to vote.
4.64/5 (15 votes)
23 Jan 20072 min read 129.6K   1.2K   76   30
An article on creating a cool Ajax-powered search page, with the help of Google APIs

CoolNSimpleGoogleAJAX/cool-n-simple-google-ajax-search.gif

Introduction

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: http://www.kenegozi.com.

Background

I've created this page since I wanted:

  1. A search oriented homepage that uses Google as its engine
  2. 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
  3. A simple way to search my blog
  4. A cool root for my personal website

Using the Code

Step 1: Initialization

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

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

Step 2: Make Room

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

HTML
<div id="queryContainer">
    <input type="text" name="query" id="query" />
</div>
<div id="searchcontrol"></div><br />
<div id="branding">Powered by Google</div>

The query input field is wrapped in a div for styling purposes.

Step 3: 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 centered in the page.

CSS
<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 an html element with width=300px. We want it to occupy the whole width of its container so we override Google's default setting.

Step 4: Applying Google's Magic

This step was assembled with the help of the Google AJAX Search API documentation, at http://code.google.com/apis/ajaxsearch/documentation/.

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

HTML
<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 http://code.google.com/apis/ajaxsearch/signup.html.

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

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

And we're almost done!

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

And that's all!

Points of Interest

  1. You must get your own key from Google at http://code.google.com/apis/ajaxsearch/documentation/
  2. You are advised to visit Google's API sites and learn to use their public APIs. It is free, fun and useful. There are also many other companies out there that offer free webservices and APIs. So you can be helped by them, and concentrate on your own business logic, without the need to 'reinvent the wheel' for common scenarios.

Have fun!

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.
A list of licenses authors might use can be found here.


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionThanks, but is not working in Content Page. Visual Studio 2010, 4.0 Pin
AlexandruPopescu82314-Apr-13 1:17
AlexandruPopescu82314-Apr-13 1:17 
GeneralMy vote of 1 Pin
chrisdavies2327-Nov-12 5:52
chrisdavies2327-Nov-12 5:52 
GeneralRe: My vote of 1 Pin
egozi1328-Nov-12 7:02
egozi1328-Nov-12 7:02 
Questionfirefox error Pin
chrisdavies2327-Nov-12 5:52
chrisdavies2327-Nov-12 5:52 
AnswerRe: firefox error Pin
chrisdavies2327-Nov-12 7:13
chrisdavies2327-Nov-12 7:13 
GeneralRe: firefox error Pin
egozi1328-Nov-12 7:03
egozi1328-Nov-12 7:03 
GeneralMy vote of 4 Pin
Farhan Ghumra2-Jul-12 2:48
professionalFarhan Ghumra2-Jul-12 2:48 
GeneralMy vote of 1 Pin
Member 164164215-Jul-10 3:50
Member 164164215-Jul-10 3:50 
GeneralResults Div Width Pin
johnmunene29-Dec-09 20:14
johnmunene29-Dec-09 20:14 
QuestionGet SearchControl results with Submit Button? Pin
nick.kramer14-Aug-09 6:08
nick.kramer14-Aug-09 6:08 
Question'Restrict by Country' search feature Pin
jointxs28-Sep-08 22:09
jointxs28-Sep-08 22:09 
QuestionHow many time I need to wait for google index the new files??? Pin
joey272719-Jul-08 13:11
joey272719-Jul-08 13:11 
AnswerRe: How many time I need to wait for google index the new files??? Pin
egozi1329-Sep-08 0:44
egozi1329-Sep-08 0:44 
QuestionHow I know what is my key ??? Pin
joey272719-Jul-08 7:44
joey272719-Jul-08 7:44 
AnswerRe: How I know what is my key ??? Pin
joey272719-Jul-08 8:14
joey272719-Jul-08 8:14 
AnswerRe: How I know what is my key ??? Pin
santhoshkumar124-Sep-09 20:01
santhoshkumar124-Sep-09 20:01 
QuestionAsync Call Pin
Audley95-Jul-08 2:19
Audley95-Jul-08 2:19 
AnswerRe: Async Call Pin
egozi1329-Sep-08 0:43
egozi1329-Sep-08 0:43 
QuestionPressing ENTER clears search field Pin
Kasper B24-Nov-07 4:01
Kasper B24-Nov-07 4:01 
AnswerRe: Pressing ENTER clears search field Pin
egozi1324-Nov-07 4:39
egozi1324-Nov-07 4:39 
GeneralRe: Pressing ENTER clears search field Pin
Kasper B24-Nov-07 5:02
Kasper B24-Nov-07 5:02 
GeneralRe: Pressing ENTER clears search field Pin
egozi1324-Nov-07 5:05
egozi1324-Nov-07 5:05 
NewsGoogle Parser online tool (GooParser) Pin
jp73129-Oct-07 17:29
jp73129-Oct-07 17:29 
GeneralEvent Pin
rodrigo889-Aug-07 6:28
rodrigo889-Aug-07 6:28 
GeneralRe: Event Pin
Ken Egozi9-Aug-07 6:38
Ken Egozi9-Aug-07 6:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.