Recent Weblogs

Links I like

Google Custom search, your audience demands it!

The ability of delivering proprietary search results has been around since their release of Google SOAP API. I am not a lawyer but the way I read their TOS document I felt like I shouldn't be publically using it. Now since they've launched their Custom Search Engine service I think things have changed.

The Ethic of branding

Google has released a very powerful service, the freedoms of their API allows for data to be transfered without legitimate notification to the user of where that information is coming from. This reminds me of plagerism, and the solution to that is citation. Google's request is not of MLA standards or bibliographic notations, but a small logo to be placed on the page. I am unsure why anyone would want to hide the source of the search results, as if there be a more credible source for such information.

A Specific Service

I have created a class that allows Service style architecture and allows for absolute customization of a Gwebresult in your HTML interface. I have attempted to dovetail this code to the prototype community as it relies heavily on prototype.js for javascript architecture.

A user interface to match

The GwebSearchService is great but won't do much without UI Components to display its results. I have set up a UI Component class that displays a list of GwebResult objects.

What is the advantage?

Absolute customization of your search results. Let Google's Custom Search Engine govern the filter of data. Let your code display that data exactly how you want. Complete client side searching means no weight on your systems, harness Google searches straight from the user's browser, completely customized to return results from the websites that you choose.

Intended audience, the Technical

You're going to need some familiarity with prototype js and a Google AJAX Search API Key.


An instance of this class has only function search(String query) it accepts a string type which should be the query of the user. It has one event searchComplete and sends the callback an array of GwebResult objects.


This class was designed to handle the searchComplete event of the GWebSearchService. It accepts an html id in the constructor which will display the results. It has an event handle that can be quickly coupled with the service named searchHandle.

If you find the default search result's markup respectable here is the HTML format of what the GWebSearchResult.buildResult will return. It executes a regex to filter out the domain, I figured it'd be site specific so the domain is kind of redundant.

	<a href="#{GwebResult.url}">#{GwebResult.title}</a>
	<span>#{GwebResult.url.replace(/^http:\/\/[^/]+/i, "")}</span>

All the Code involved

Instead of pasting big globs of code into pre tags im just going to link all of the source or download sites to the code that is necessary.

Putting the pieces together

Once you've got all your dependant source code put together its time to tie some class instances together. Here is the glob of code I have used in my implementation. Where "historyElement" follows the historyElement microformat, "results" is a div on the page where search results will be placed.

var myService = new GWebSearchService("historyElement", [Google Custom Search Engine ID or site restriction URL]);
        var myInterface = new GWebSearchResult("results");
        myService.registerRequest("start", {});
        myService.addEventListener("start", function(){
                                                    $("results").innerHTML = "Weclome to my Blog Search";
        myService.addEventListener("searchComplete", myInterface.searchHandle);
        var msf = new EventForm("searchForm");
        msf.addEventListener("submit", function(dto){

A note on the historyElement

With the historyElement make sure your forms target is the iframe and make sure its action is set to the same dummy URL as the IFrame's src is. Also make sure that dummy url is actually somewhat valid I usually just use an untitled.html file. It must receive a response 200 status code or else the load event won't function properly.

If you're looking to customize the search result just extend the GWebSearchResult class's buildResult function, the function receives a single GwebResult object and must return an HTML element.

    var GWebSearchCustom = Class.create();
    Object.extend(Object.extend(GWebSearchCustom.prototype, GWebSearchResult.prototype),
                        buildResult : function(result){
                            var obj = document.createElement("a");
                            obj.href = result.url;
                            obj.innerHTML = result.title;
                            return obj;

Still having trouble putting it together?

Check out my implementation and disect its code.

Comments are Disabled.