HTML clipboard
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