A simple search page using Google AJAX Search API

Casper · **Posted:** Sun Nov 09, 2008 6:19 am

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

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 it's 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:

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>

Step 2: Make room

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

Code:

<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 at the centered in the page

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

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

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

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

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:

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

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,

Article by: Ken Egozi

vaithi · **Posted:** Wed May 13, 2009 7:07 am

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

rakeshgiri · **Posted:** Sun Aug 29, 2010 10:15 am

hi,

i am rakesh giri ,a software developer from india,

i just saw your article on internet regarding using ajax.
i am facing some problem and want help.

i hope you will help me

i have a website named 'bizlis.com'which i have built a website in asp.net 2.0 with sql 2005 database.it is a database search engine which searches buyers and sellers all around the world....

my mssql database consist of 267 tables of 267 countries(table names-dbo.india,dbo.australia etc) which contains suppliers/buyers of that particular country/table.which has fields like address,email,website,buyer or seller(cateory) etc. each country table has all the details of buyer or supplier of that country

when user enters url 'bizlis.com'.my home page opens .loading time of home page is fast.homepage has ..
user has to select country from dropdown box,he selects category from dropdown(buyer/seller)he then selects a criteria from dropdown(exact phase search,anyword search or all word search) after that he enter product name in the textbox which he wants to search ...after that searching is done ..the problem is that my searching for the first page takes very long time it takes 8-10 seconds (try searching for steel sellers from india as it has maximu records)..after first page is loaded in 9-10 sec ..then 50 records are shown .it has navigation button on click of next navigation button data comes faster as compared to loading(starting first page-which brings data for the first time ) page.yhis is because cahing is applied...

hence now my biggest problem is that how to make my first datapage fast(starting first page-which brings data for the first time)

some of my friends told me to apply pre caching

i can do it in this way

by loading data into cache by country dropdown (when user selects country before pressing on submit button).
in this way the table of the country which is selected by user will get loaded.

but in the case of country dropdown cache,user might have to wait for some time after selecting coutry as data will be loaded and he might not be able to select other dropdown such as (all,any,exact search or enter the product name in the text box)

my friends suggested me :pre-caching on the DB tier by using perhaps using Ajax to submit a query before the user hits the submit button.

my main problem is that to avoid waiting for user when data is being loaded .as i want the cache data to be loaded as fast as as possible ..so that user donot have to wait for clicking on next action as data is being loaded in cache

i just saw your article regarding using ajax .i think this thing can help me .

hence can you help me by giving sugesstion/codes about what to do and how to avoid user waiting after dropdown selection
as caching is done in backend and user does not face any difficulty in acessing the website (does not have to wait while home page is being loaded(when all tables are cached or does not have to wait after country dropdown is selected)

hope you will help me on these issues

thanks in advance

mnmaria20 · **Posted:** Thu Sep 02, 2010 11:14 am

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.

A simple search page using Google AJAX Search API

Users browsing similar posts