Click here to Skip to main content
11,720,785 members (78,800 online)
Click here to Skip to main content

Experimenting with DHTML, Google Search API, and AJAX

, 5 May 2009 Public Domain 20.5K 13
Rate this:
Please Sign up or sign in to vote.
Learn how to create horizontal tabs of varied search results with DHTML in pure xHTML and JavaScript with AJAX.

Introduction

Google becomes increasingly active every day and is involved in the development of high quality usable source code. They are also exposing their APIs and allowing fellow webmasters to incorporate Google functionality into their own web pages. By the end of this article, you will have created a Google Search with a tabular layout offering various categories of results (see below). If you wish to get highly involved with Google's Services, you should obtain an API key. To find out why this is useful and sign up for one, see the page here. You will need an API key to get results for this project.

Background

The code here is based on a project by Ken Egozi in 2007. You should read his project for an idea of what is going on. I have updated the API code to the new Google recommended standard which has allowed me to explore new features of the API that are demonstrated here. The thing that is great about this project is that it is coded in pure XHTML and JavaScript which means it does not rely on any server side code.

The code

Please enjoy this fully commented script which adds web, image, video, news, site, and local search in a tabular way.

<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=
        PutYourOwnAPIKeyInHere" type="text/javascript"></script>

Potential problems

As you may have noticed, wherever a person types on the page, the focus will automatically be on the input field for the search. While this is very user-friendly, it yields one major problem. Some tabs make use of their own option fields (for example, the Local Search) which allows the user to specify their area. The problem here is that if the user attempts to fill the box, the text will appear in the search input field. This can be fixed by removing this code:

if (query == null)
    qquery = document.getElementById('query');
    // and move the focus in there
    query.focus();
}

So that you are left with:

var query = null;
document.onkeydown = function(event) { kd(event); };
function kd(e) {
    if (!e) e = event;
    if (e.keyCode == 27)
        searchControl.clearAllResults();
}

This will remove the ability to automatically focus on the search input field. However, I have not removed it by default as this conflict may not occur depending on what Google functions you choose to use.

And you're done...

It should work like a charm now with all the different functions of the Google Search API that you added. Feel free to make adjustments and modifications to it, but if you do something you think is worth telling us about, by all means do.

Further information

AJAX is becoming increasingly popular, and is the basis of the new Web 2.0. The technologies demonstrated today are constantly evolving, and you have just witnessed the tip of the iceberg. Further information regarding the Google Search API as well as other APIs can be found here on the Google website. You can even want to add a blog search to the tabs, which is easy enough to find out.

Thank you for reading

Thank you for reading about AJAX and the Google Search API. I would also like to thank Ken Egozi for his project which is very resourceful. If you have any queries or ideas, please don't hesitate to leave a message.

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication

Share

About the Author

SamNazarko
Other
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

 
Questioncode bug Pin
chrisdavies2327-Nov-12 9:24
memberchrisdavies2327-Nov-12 9:24 
GeneralTweaking this code Pin
ercatli28-Feb-10 10:04
memberercatli28-Feb-10 10:04 
GeneralRe: Tweaking this code Pin
SamNazarko28-Feb-10 10:33
memberSamNazarko28-Feb-10 10:33 
GeneralRe: Tweaking this code Pin
ercatli28-Feb-10 11:27
memberercatli28-Feb-10 11:27 
GeneralRe: Tweaking this code Pin
SamNazarko28-Feb-10 20:41
memberSamNazarko28-Feb-10 20:41 
GeneralRe: Tweaking this code Pin
ercatli1-Mar-10 1:02
memberercatli1-Mar-10 1:02 
GeneralRe: Tweaking this code Pin
SamNazarko1-Mar-10 7:13
memberSamNazarko1-Mar-10 7:13 
GeneralRe: Tweaking this code Pin
ercatli1-Mar-10 9:59
memberercatli1-Mar-10 9:59 
GeneralRe: Tweaking this code Pin
SamNazarko1-Mar-10 11:40
memberSamNazarko1-Mar-10 11:40 
GeneralRe: Tweaking this code Pin
ercatli1-Mar-10 11:53
memberercatli1-Mar-10 11:53 
Questionexcellent post Pin
Dibyendu Biswas1-Dec-09 0:27
memberDibyendu Biswas1-Dec-09 0:27 
AnswerRe: excellent post Pin
Dibyendu Biswas1-Dec-09 1:25
memberDibyendu Biswas1-Dec-09 1:25 
QuestionGoogle Search in subfolders of website Pin
mshubhu16-Jun-09 1:34
membermshubhu16-Jun-09 1:34 
Generalnice Pin
JeffCirceo6-May-09 12:48
memberJeffCirceo6-May-09 12:48 
GeneralRe: nice Pin
SamNazarko8-May-09 9:42
memberSamNazarko8-May-09 9:42 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150901.1 | Last Updated 5 May 2009
Article Copyright 2009 by SamNazarko
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid