Total members 11797 |It is currently Sun Sep 22, 2019 1:00 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





Attachment:
File comment: Screenshot
Cool-n-Simple-Google-AJAX-Search.gif
Cool-n-Simple-Google-AJAX-Search.gif [ 55.27 KiB | Viewed 7461 times ]

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:
Code:
http://www.kenegozi.com


Features :
  • A search oriented homepage that uses Google as it's engine.
  • 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.
  • A simple way to search my blog.
    A cool root for my personal website.

Initialization

The first thing we are going to do, is to create a minimal webpage markup:

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


Make room

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


html code
<div id="queryContainer">
<input type="text" name="query" id="query" />
</div>
<div id="searchcontrol"></div><br />
<div id="branding">Author</div>


The query input field is wrapped in a div for styling purposes:
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
css 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
Applying Google's Magic

This step was assembled with the help of the Google AJAX Search API documentation, at
Code:
http://code.google.com/apis/ajaxsearch/documentation/


So we will add the next declaration to our page's <head> section:

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


Now we'd add the next javascript code to the <head> section:
javascript 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"));
}


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:

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


Points of Interest : Get key from google, at
Code:
http://code.google.com/apis/ajaxsearch/documentation/

Code :
html 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>Simple Search Page</title>
<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&amp;v=1.0&

amp;key=ABQIAAAAbKU1_TiGJxAPxQNRN0Z7thQEKx5ztgmPnP8AiUB_ZtaZmH_j4xR_bAGbjyG4GamffxBhkZcRXMQE0A"

type="text/javascript"></script>

<script type="text/javascript">
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"));
}

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();
}
</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>
<h1>Simple Search Page</h1>
<p style="text-align:left"> You can type anywhere on

the page, and the search results will be updated. <br />
Use ESC key to clear the search results
</p>
<br />
<br />
<div id="queryContainer">
<input type="text" name="query" id="query" /><br />
<div id="branding">Author</div>
</div>
<div id="searchcontrol"></div>

</body>
</html>





Attachments:
Cool-n-Simple-Google-AJAX-Search_src.zip [1.47 KiB]
Downloaded 1846 times

_________________
Please recommend my post if you found it helpful. ,
java,j2ee,ccna ,ccnp certified .
Author:
Expert
User avatar Posts: 838
Have thanks: 2 time

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


Author:
Newbie
User avatar Posts: 1
Have thanks: 0 time

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.


Author:
Newbie
User avatar Posts: 1
Have thanks: 0 time
Post new topic Reply to topic  [ 3 posts ] 

  Related Posts  to : A simple search page using Google AJAX Search API
 PHP Google search results grabber.     -  
 How to do a simple search engine for website using PHP     -  
 Update table with search box using ajax     -  
 Servlets/JSP Website search page example     -  
 JSP Search Engine     -  
 binary search     -  
 Run query and search from ASP     -  
 Search engine optimization     -  
 Binary search tree C++     -  
 how we can search in filehandling without using structures a     -  



cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com