Table of Contents

Introducion

Gproto.js is a simple javascript library based on Google Ajax Search API. The main resaon of creating this library was to give ability to control every part of the search results provided by Google Ajax.

Using gproto.js you can:

  1. put the results of each search in a different places.
  2. change the style of each result - color,fonts, background colors.
  3. change the style of each part of each result - top and bottom links, descriptions, thumbs, additional information,
  4. hide any parts of the results,
  5. control how many results are displayed (from 1 to 8),
  6. set the message displayed while loading the results (preloader),
  7. set the message displayed when no results were found,
  8. show or hide the information about which search you are using,
  9. show or hide the "more results" link.

The current version of gproto.js use GwebSearch, GvideoSearch, GblogSearch and GnewsSearch of Google Ajax Search API.

Instalation

First, you need to get the Google Ajax Search API key - Sign up for a Google AJAX Search API key

Next, put the following code inside head tag:

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&amp;key=API_KEY" type="text/javascript"></script>
<script type="text/javaScript" src="gproto.js"></script>

Replace API_KEY with your api key.

Result Structure

When search is complete the Gproto object will build following structure:

<div id="container"> container is not generated automatically
if no results were found:
<div>
<span></span> className= .searchname
<span>.noresults</span>
</div>
else
<div>
<span></span> className= .searchname
resultNumber=0
<div> className=.result
<div> className= .setStyle[resultNumber].thumb
<a> className= .setStyle[resultNumber].thumblink
<img> className .setStyle[resultNumber].thumbimage
</a>
</div>
<div>
<a></a> className= .setStyle[resultNumber].title
<p></p> className= .setStyle[resultNumber].desc
<span></span> className= .setStyle[resultNumber].add
<a></a> className= .setStyle[resultNumber].link
</div>
</div>
... resultNumber=1,2,3,4,5,6,7
<a></a> className= .moreresults
</div>
</div>

.thumb, .thumblink, .thumbimage are only available for video search.
.add className is only available for blog, video and news search.

Class reference

Gproto(...)

Gproto(search, cseId, setSiteRestriction);

search - type of search

cseId - custom search engine ID (see Google Ajax Search API class reference)
setSiteRestriction - restric search to the specified site (see Google Ajax Search API class reference)

Example:
var searchweb=new Gproto('web');
var searchblog=new Gproto('blog');
var searchwiki=new Gproto('web','','en.wikipedia.org');

Gproto.results

.results=nr

nr - the number of results to view - 1,2,3,4,5,6,7 or 8

Example:
searchweb.results=3;

Gproto.clearAllResults();

.clearAllResults();

Removing everything from the container.

Example:
searchweb.clearAllResults();

Gproto.execute(...);

.execute(query,container);

query - kewords to search.
container - a place where you want to put the results.

Example:
searchweb.execute('windows','webcontainer');

Gproto.setStyle[];

.setStyle[nr]

nr - the result number - 0,1,2,3,4,5,6,7

.setStyle[nr].result - class name for result - "div" tag
.setStyle[nr].thumb - class name for video thumb - "div" tag
.setStyle[nr].thumblink - class name for video thumb link - "a" tag
.setStyle[nr].thumbimage - class name for video thumb link - "img" tag
.setStyle[nr].title - class name for title link - "a" tag
.setStyle[nr].desc - class name for description - "p" tag
.setStyle[nr].add - class name for additional info - "span" tag
.setStyle[nr].link - class name for bottom link - "a" tag

Example:

a.toplink,a.toplink:visited, a.toplink:hover {
font-size:12px;
border:0;
color: #9500B3;
text-decoration: none; }
a.title:toplink {
border-bottom: #9500B3 dotted 1px; }

searchweb.setStyle[0].title='toplink';
searchweb.setStyle[0].link='toplink';

Gproto.setAllStyles();

.setAllStyles();

This method fills .setStyle array with values from the first .setStyle element.

Example:
searchweb.setStyle[0].link='toplink';
searchweb.setAllStyles();
Same as:
searchweb.setStyle[1]=searchweb.setStyle[0]; searchweb.setStyle[2]=searchweb.setStyle[0]; ... searchweb.setStyle[7]=searchweb.setStyle[0];

Gproto.noresults;

.noresults='message';

The message displayed when no results were found.

Example:
searchweb.noresults='Query did not match any documents.';

Gproto.loader;

.loader='message';

The message displayed while loading the results.

Example:
searchweb.loader='Loading...';

Gproto.searchname;

.searchname=class name for search name - "span" tag

Example:
.searchtitle {
font-size:12px;
border:0;
color: #FFFFFF;
background: #000000; }

searchweb.searchname='searchtitle';

Gproto.moreresults;

.moreresults=class name for more results link "a" tag

Example:
.moreres {
font-size:12px;
border:0;
color: #FF0000; }

searchweb.moreresults='moreres';

Examples

Download

Download gproto.js

Click right mouse button on the link and choose "Save As".

Terms of use

Gprot.js library is based on Google Ajax Search Api. Before you build any application using gproto.js or Google Ajax Search API you should read and obey Google AJAX Search API Terms of Use

Disclaimer

The author takes no responsibility for how this library, functions, or any part of the code is used.

//digitalinsane.com K!2006