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&v=1.0&key=
PutYourOwnAPIKeyInHere" type="text/javascript"></script>
<script type="text/javascript">
var searchControl;
window.onload = function() {
onLoad();
}
function onLoad() {
searchControl = new google.search.SearchControl();
searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
searchControl.setLinkTarget(google.search.Search.LINK_TARGET_PARENT);
var webSearch = new google.search.WebSearch();
webSearch.setUserDefinedLabel("Web");
searchControl.addSearcher(webSearch);
var imageSearch = new google.search.ImageSearch();
imageSearch.setUserDefinedLabel("Images")
searchControl.addSearcher(imageSearch);
var LocalSearch = new google.search.LocalSearch();
LocalSearch.setUserDefinedLabel("Locations")
searchControl.addSearcher(LocalSearch);
LocalSearch.setCenterPoint("London, UK");
var VidSearch = new google.search.VideoSearch();
VidSearch.setUserDefinedLabel("Video");
searchControl.addSearcher(VidSearch);
var newsSearch = new google.search.NewsSearch();
newsSearch.setUserDefinedLabel("News");
searchControl.addSearcher(newsSearch);
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel("Wikipedia");
siteSearch.setSiteRestriction("wikipedia.org");
searchControl.addSearcher(siteSearch);
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
drawOptions.setInput(document.getElementById('query'));
searchControl.draw(document.getElementById("searchcontrol"),
drawOptions);
GSearch.getBranding(document.getElementById("branding"));
}
var query = null;
document.onkeydown = function(event) { kd(event); };
function kd(e) {
if (!e) e = event;
if (e.keyCode == 27)
searchControl.clearAllResults();
if (query == null)
query = document.getElementById('query');
query.focus();
}
</script>
<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>
</head>
<body>
<div id="queryContainer">
<input type="text" name="query" id="query" /><br/>
<div id="branding"></div>
</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');
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.