 |
Web Development »
Ajax and Atlas »
Atlas
Beginner
A cool'n'simple search page using Google AJAX Search API, and some DHTMLBy Ken EgoziAn article on creating a cool ajax-powered search page, with the help of google APIs |
Javascript, XML, HTML, Windows, Visual Studio, Ajax, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
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
I've created this page since I wanted:
The first thing we are going to do, is to create a minimal webpage markup:
<!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>
Now we will add a search field, and make room for the search results:
<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
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
<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
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:
<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&v=1.0&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:
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
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:
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.
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 23 Jan 2007 Editor: Paul Conrad |
Copyright 2007 by Ken Egozi Everything else Copyright © CodeProject, 1999-2009 Web18 | Advertise on the Code Project |
