Creating a Google AJAX Search Control in .NET

As I discussed yesterday, the current non-SOAP Google approach is to use 100% JavaScript and their own custom UIs.  That really annoys me that I can’t take the service, call it, pass along some values, and get search results back.

My next thought was, if nothing else, encapsulate all the odd options and such into a nice little control.  This isn’t necessary for the Yahoo! search, as it’s SDK has it’s own controls, result objects, etc.  For the full list of Google AJAX Search options, check out the class reference.

Download .net 3.5 Complete Project [updated 30 Oct 07/10:55]

Our control has five properties:

• The Google AJAX Search API Key: this string property is for the key specific to this particular instance and is URL aware, so you’ll need one per application (or directory).
• Four “Enable” properties: EnableWebSearch, EnableImageSearch, EnableVideoSearch, EnableBlogSearch.  These are booleans are true by default and toggle the searchers applied to the control.  I made these toggleable because in some environments, like at my office, Google’s Image and Video searches are blocked, and others may not want those results. 🙂

The only method to override in our custom control is CreateChildControls; we’ll use it to populate the page with our JavaScripts.

protected override void CreateChildControls()

{

base.Page.ClientScript.RegisterClientScriptInclude(“apiScript”,

“http://www.google.com/jsapi?key=” + this.Key);

StringBuilder searchers = new StringBuilder();

       searchers.AppendLine(“google.load(‘search’, ‘1’);”);

       searchers.AppendLine(“function initialize() {“);

searchers.AppendLine(“\tvar searchControl = new

google.search.SearchControl();”);

       if (EnableWebSearch)

searchers.AppendLine(“\tsearchControl.addSearcher(new

google.search.WebSearch());”);

if (EnableImageSearch)

searchers.AppendLine(“\tsearchControl.addSearcher(new

google.search.ImageSearch());”);

if (EnableVideoSearch)

searchers.AppendLine(“\tsearchControl.addSearcher(new

google.search.VideoSearch());”);

if (EnableBlogSearch)

searchers.AppendLine(“\tsearchControl.addSearcher(new

google.search.BlogSearch());”);

searchers.AppendLine(“\tsearchControl.draw(document.getElementById(‘” +

this.ClientID + “‘));”);

searchers.AppendLine(“}”);

       searchers.AppendLine(“google.setOnLoadCallback(initialize);”);

 

       base.Page.ClientScript.RegisterClientScriptBlock(this.GetType(),

“searchers”,

             searchers.ToString(), true);

}

The apiScript provides the link to the Google JavaScript objects (and passed along the unique key).  The searchers is the guts of the search component and generates a JavaScript block wherever you place your control. 

Notice on the .draw method of the searchControl, it’s drawing back to itself (the control, by default, generates a span tag; we’re simply returning the “drawing” of the control back to that.  It’s possible to add another property, something like TargetControlId, and use that to separate out the search logic and the actual location the search UI is presented.

To place the control on your page, drop and drag it from the toolbar, or code.  Here’s an example with the VideoSearch disabled.

<googleControls:GoogleSearch

ID=”GoogleSearch1″

runat=”server”

EnableVideoSearch=”false”

Key=”KEYHERE” />

Unfortunately, this still doesn’t resolve using the Search API for non-web interfaces. 😦

Tags: Google+API, gSearch, server+control, ajax, asp.net, javascript

Advertisements