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. 😦
CreateChildControls() is still my favorite override. Good stuff.
Pretty awesome article. Thanks! – CowDir
Very good Control !!
But Can you explain me how work TargetcontrolId if I want results diplay in a new page ?
Thanks
Merci
Julie
@Julie- Unfortunately, with this example, you can’t. The logic for displaying the search results is:
searchers.AppendLine(“\tsearchControl.draw(document.getElementById(’” + this.ClientID + “‘));”);
Which populates the that DOM element with the results.
You “could” have your original search page simply be a facade and when a search query is entered, redirect the form to a new window/page with the Google logic in the Page_Load event.
There are additional formatting options you can add as well; the full API for Google’s search can be found at:
http://code.google.com/apis/ajaxsearch/documentation/reference.html
hi David,
How can I obtain the results for storage in a db? Could you provide me with a small example?
KR,
Tom
@Tom-
What exactly do you mean? Storing the searches in to a database and saving them?
The controls simply display the JS provided by Google, it doesn’t return an array or generic list you could iterate over and store–plus… ehh, why? 😉
Maybe if you could provide a bit on what you’re trying to do, we could see about options. 🙂
-dl
David,
very neat control. Will this work with Google Custom Search eg. for my specific site?
Hi,
Is it possible to get any of the results from this back into a .net variable?
hellos!
can i ask anyome. what does Google Api Search Control returns?
please let me know. thanks so much!
@Jael-
http://is.gd/u5S
so it returns a JSON encoded results, which is?
sorry. i’m quite lost at it. i’m rushin to hand in a project so need to know.
thanks =D
does anyone know what does yahoo BOSS Api how to use?