Home > .net 2.0, .net 3.5, AJAX, c#, Google, JavaScript, Visual Studio 2005, Visual Studio 2008 > Creating a Google AJAX Search Control in .NET

Creating a Google AJAX Search Control in .NET

October 30, 2007

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

  1. October 30, 2007 at 12:02 pm

    CreateChildControls() is still my favorite override. Good stuff.

  2. October 31, 2007 at 7:42 pm

    Pretty awesome article. Thanks! – CowDir

  3. Julie
    January 8, 2008 at 7:44 am

    Very good Control !!
    But Can you explain me how work TargetcontrolId if I want results diplay in a new page ?

    Thanks
    Merci
    Julie

  4. January 8, 2008 at 9:31 am

    @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

  5. Tom
    February 8, 2008 at 8:53 am

    hi David,
    How can I obtain the results for storage in a db? Could you provide me with a small example?

    KR,
    Tom

  6. February 9, 2008 at 1:46 pm

    @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

  7. Duncan
    February 4, 2009 at 3:23 am

    David,

    very neat control. Will this work with Google Custom Search eg. for my specific site?

  8. Dicki
    March 20, 2009 at 3:24 am

    Hi,

    Is it possible to get any of the results from this back into a .net variable?

  9. Jael
    May 4, 2009 at 1:37 am

    hellos!
    can i ask anyome. what does Google Api Search Control returns?
    please let me know. thanks so much!

  10. Jael
    May 5, 2009 at 3:26 am

    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

  11. Jael
    May 5, 2009 at 9:34 pm

    does anyone know what does yahoo BOSS Api how to use?

  1. October 30, 2007 at 2:50 pm
Comments are closed.
%d bloggers like this: