Creating an Instant Google Search using jQuery

An instant is an infinitesimal moment in time, a moment whose passage is instantaneous. The continuous nature of time and its infinite divisibility was addressed by Aristotle in his Physics, where he wrote on Zeno's paradoxes. The philosopher and mathematician Bertrand Russell was still seeking to define the exact nature of an instant thousands of years later.
Let's create a clone of Google's instant search using jQuery.

Try it first:

Top News Headlines

---

Around the globe!

First, you will have to create a JavaScript file named instant.js. Here it is:

instant.js

var imageSearch;
var webSearch;
var newsSearch;
var blogSearch;
var lastSearch=4;
$(function(){
        imageSearch=new google.search.ImageSearch();
        imageSearch.setSearchCompleteCallback(this,imgSearchComplete,null);
        webSearch=new google.search.WebSearch();
        webSearch.setSearchCompleteCallback(this,webSearchComplete,[webSearch,lastSearch]);
        newsSearch=new google.search.NewsSearch();
        newsSearch.setSearchCompleteCallback(this,newsSearchComplete,[newsSearch,lastSearch]);
        var hash=window.location.hash;
        if(hash!=""&&hash.length>0)
        {
                if(hash.substr(0,3)=='#q=')
                {
                        var query=hash.substr(3,hash.length-3);
                        $('#searchbox').removeClass('text-label').val(query);search(query);
                }
        }
        $('#searchbox').focus();
});
function imgSearchComplete()
{
        if(imageSearch.results&&imageSearch.results.length>0)
        {
                var contentDiv=document.getElementById('image-content');
                contentDiv.innerHTML='';
                var results=imageSearch.results;
                for(var i=0;i<results.length;i++)
                {
                        var result=results[i];
                        var imgContainer=document.createElement('div');
                        imgContainer.setAttribute("align","left");
                        var newLink=document.createElement('a');
                        newLink.href=result.unescapedUrl
                        newLink.target="_new";
                        newLink.title=result.titleNoFormatting;
                        var newImg=document.createElement('img');
                        newImg.src=result.tbUrl;
                        newImg.setAttribute("align","left");
                        newImg.setAttribute("height",105);
                        newLink.appendChild(newImg);
                        imgContainer.appendChild(newLink);contentDiv.appendChild(imgContainer);
                }
        }
}
function webSearchComplete(searcher,searchNum)
{
        var contentDiv=document.getElementById('web-content');
        contentDiv.innerHTML='';var results=searcher.results;
        var newResultsDiv=document.createElement('div');
        newResultsDiv.id='web-content';
        for(var i=0;i<results.length;i++)
        {
                var result=results[i];
                var resultHTML='<div style="height:70px; margin-top:5px;">';
                resultHTML+='<a href="'+result.unescapedUrl+'" class="linki" target="_blank"><b>'+result.titleNoFormatting+'</b></a><br/>'+result.content+'<div/>';
                newResultsDiv.innerHTML+=resultHTML;
        }
        contentDiv.appendChild(newResultsDiv);
}
function newsSearchComplete(searcher,searchNum)
{
        var contentDiv=document.getElementById('news-content');
        contentDiv.innerHTML='';
        var results=searcher.results;
        var newResultsDiv=document.createElement('div');
        newResultsDiv.id='news-content';
        for(var i=0;i<results.length;i++)
        {
                var result=results[i];
                var resultHTML='<div style="height:70px; margin-top:5px;">';
                resultHTML+='<a href="'+result.unescapedUrl+'" class="linki" target="_blank"><b>'+result.titleNoFormatting+'</b></a><br/>';
                resultHTML+=result.content+'</div>';
                newResultsDiv.innerHTML+=resultHTML;
        }
        contentDiv.appendChild(newResultsDiv);
}
$('#searchbox').keyup(function()
{
        var query=$(this).val();
        search(query);
});
function search(query)
{
        if(query.length>0)
        {
                $("#search-content").show();
                document.title=query+" | W Coder";
                window.location.hash="query="+query;
        }
        else
        {
                document.title="W Coder";
                $("#search-content").hide();
        }
        imageSearch.execute(query);webSearch.execute(query);newsSearch.execute(query);
}
$('#searchbox').each(function()
{
        $(this).addClass('text-label');
        $(this).keyup(function()
        {
                if(this.value.length==1)
                {
                        $(this).removeClass('text-label');
                }
                if(this.value=='')
                {
                        $(this).addClass('text-label');
                }
        });
});

The HTML file which contains the search field:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load('search','1');</script>
<input type="text" title="Instant" id="searchbox" name="q"/>
<div id="search-content">
<br/>
        <div class="content" style="width:800px;">
                <div class="header"><h3>Top News Headlines</h3></div>
                <div class="data" id="news-content"></div><br/>
        </div>
        <hr/>
        <div class="content" style="width:800px;">
                <div class="header"><h3>Around the globe!</h3></div>
                <div class="data" id="web-content"></div><br/>
        </div><div style="width:800px;"></div>
</div>