Google Ajax Search API with different techniques

Introduction

As we know google has launched "ajax search api" with different types of feaslilities 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 searcing local maps for you site.

Article Covers

In this article I am showing you the all search techniques of google.

This article covers:

- How to get Google API Key.
- How to create a "Hello World" general search
- How to format the search
- How to create a "Site Restricted Search".
- How to show search result in "Tabbed Form".
- How to show large search result.
- How to show "Search Query"
- How to use the technique that "Search as the user types"
- 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 u'll get a page like this.



Coding:

2. How to use google search API feaslility 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 control
  var 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.

CODING

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

     function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl(); 

      // Add in a full set of searchers
      var 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 point
      localSearch.setCenterPoint("Germany,Ber");
 
      // Tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));
 
      // Execute an inital search
      searchControl.execute("Google");
    }

   google.setOnLoadCallback(OnLoad);

 9. Place websearch tab at different location in page:

Coding:

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.

Hope you enjoy this.

CONTINUE:

-Nikhil Kumar