Click here to Skip to main content
13,144,958 members (48,111 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 5 May 2009

Experimenting with DHTML, Google Search API, and AJAX

, 5 May 2009
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.


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.


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="" 
  type="text/css" rel="stylesheet" />
<script src=";v=1.0&amp;key=
        PutYourOwnAPIKeyInHere" type="text/javascript"></script>

<script type="text/javascript">
var searchControl;
window.onload = function() {
function onLoad() {
    // Create a search control
    // Bold text signifies a variable that is changeable.
    searchControl = new;
    // Let's get lots of results
    // This can be .SMALL_RESULSET for 4 results per page
    // or .LARGE_RESULTSET FOR 8 results per page.

    // Open in a new window (you can use SELF, PARENT, TOP or BLANK targets)

    // add a regular web search
    var webSearch = new;

    // add an image search
    var imageSearch = new;

    // add a local search
    var LocalSearch = new;

    // change this to a desired location
    // (zip/post code, address, city or even country)
    LocalSearch.setCenterPoint("London, UK");

    // add a video search
    var VidSearch = new;

    // add a news search
    // seems to only get US results.
    var newsSearch = new;

    // add a wikipedia search
    var siteSearch = new;

    // here we use Wikipedia as an example
    // of a site to retreive results from. 

    // setting the draw mode for the Google search
    var drawOptions = new GdrawOptions();

    // use tabbed view

    // set the input field (instead of the default one)

    // actually write the needed markup to the page
    // set the google logo container

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)
    // get the input field
    if (query == null)
    query = document.getElementById('query');
    // and move the focus in there

<style type="text/css">
font-family: verdana;
text-align: center;
width: 80%;
border:1px solid silver;
width: 100%;
width: 100%; 
<div id="queryContainer">
<input type="text" name="query" id="query" /><br/>
<div id="branding"></div>
<div id="searchcontrol"></div>

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

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)

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.


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


About the Author

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170915.1 | Last Updated 5 May 2009
Article Copyright 2009 by SamNazarko
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid