How to use Google Ajax Search API-Part 02

Introduction

As we know Google has launched "ajax search api" with different types of facilities like "Web Search", "Local Search" and "Multimedia Search" etc.It's a big concept and having a lot of amazing codes that make our blog or website powerful in the sense of searching.Multimedia Search includes YouTube Videos and Google Image in your website or blog.Google Maps Api gives the power of searching local maps for you site.

Contents

In this article I am showing you the all search techniques of Google.This article covers:

1. How to get Google API Key.
2. How to create a "Hello World" general search
3. How to format the search
4. How to create a "Site Restricted Search".
5. How to show search result in "Tabbed Form".
6. How to show large search result.
7. How to show "Search Query"
8. How to use the technique that "Search as the user types"
9. Place websearch tab at different location in page

In my next upcoming articles I'll explain how to use "YouTube Search", "News Search", "Image Search" and many more

1. How to get Google API Key

The first step is to get a google api for this just search "get google ajax api" and click the first link then accept the T&C and type the website name for which you want create search control.

Sign In and then you'll get a page like this. 

Coding

2. How to use google search API feasibility in asp.net

Now how will you use this search in your asp.net application? For this copy the whole code next to the key. 

The output will look like this 

3. Format the search

We can format the search result and search control too by using style.Here "searchcontrol" is a control and we can change the backgroud color, width, margin, Text align, even color etc. of this control.Just use this code after closing the </script> tag.

<style type="text/css">body{font-family:Arial Rounded MT Bold;background-color:Silver;}#searchcontrol{background-color:ActiveBorder;width:50%;margin-left:auto;margin-right:auto;text-align:left;}

 For more styling you can use <div> tags.

4. How to create a "Site Restricted Search"

Now we will see how can be restrict the search for only one website.

Example- If we want the search result from the website "www.cartoonnetwork.com"

We can achieve this by a small modification in code.

5. How to show search result in "Tabbed Form".

For this we have to change a small amount of code only.

function OnLoad()

{// create a tabbed mode search controlvar tabbed = new google.search.SearchControl();// create our searchers.  There will now be 3 tabs.tabbed.addSearcher(new google.search.LocalSearch());
  tabbed.addSearcher(new google.search.WebSearch());
  tabbed.addSearcher(new google.search.BlogSearch());

 Output 

6. How to show large search result

For achieving this, codes will be 

7. How to show "Search Query"

Download the attachment to get the solution.

8. How to use the technique that "Search as the user types"

This is a cool feature in this searching automatically starts as the user types search query in the search box no need to click the button and hit the enter

Code

google.load("search", "1");function OnLoad() {// Create a search controlvar searchControl = new google.search.SearchControl();// Add in a full set of searchersvar localSearch = new google.search.LocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());// Set the Local Search center pointlocalSearch.setCenterPoint("Germany,Ber");// Tell the searcher to draw itself and tell it where to attachsearchControl.draw(document.getElementById("searchcontrol"));// Execute an inital searchsearchControl.execute("Google");
    }

   google.setOnLoadCallback(OnLoad);

 9. Place websearch tab at different location in page:

Code

google.load('search', '1');

function OnLoad() {

  // create a search control
  var searchControl = new google.search.SearchControl();

  // web search, open, alternate root
  var options = new google.search.SearcherOptions();
  options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
  options.setRoot(document.getElementById("searchcontrol"));
  searchControl.addSearcher(new google.search.WebSearch(), options); 
  searchControl.addSearcher(new google.search.LocalSearch());
  searchControl.addSearcher(new google.search.BlogSearch());
 
  // tell the searcher to draw itself and tell it where to attach
  searchControl.draw(document.getElementById("search_control"));

   // execute an inital search
  searchControl.execute("Ferrari Enzo");
}
google.setOnLoadCallback(OnLoad);
</script></head><body><div id="searchcontrol">Loading...</div><div style="background-position:right" id ="search_control"></div></body></html>

 Conclusion

We learned how to use Google Ajax Search API with different techniques; we learned how to format the search result etc.Download the attachment for better result.

Sample Project Source

Download source files -1905 kb