Google AJAX Search API lets us to use the Google search in web applications. This means you can use the same technology in your web apps, which powers the Google.com search. In more technical words; The Google AJAX Search API lets you put Google Search in your web pages with JavaScript.
The web search component of this specific library is available since long and they have just recently added the multimedia search. Now, developers can search for images and videos through Google Multimedia Search.
This example shows you that how you can easily use the Google AJAX Image Search API in your web apps. See the screen shot below:
- Google Image Search AJAX API Example Screen shot
Now, let’s start and move to the code beauty:
Step 1: Sign-up for an AJAX Search API Key: One key per domain.
Go to this link http://code.google.com/apis/ajaxsearch/signup.html provide your website URL/link and generate an API key for you. This is one time process and one key works for one domain.
Step 2: Download the example code.
Before you proceed to download, you can see the live demo below.
Step 3: Replace the key with your own and run the example. For example, for my domain i use the following key with the call to google ajax search API.
Good work sachin,Good Blog for starters in web development
Thanks mani
Gr8 Work. This API is very helpful for Y generation website.
Good Job……..
This is good,but i need script that using php. I need return on xml format.
Its really good but in IE when search any image then input box width is decrese,
hw to solve it
Good catch hemanshu, I didnt notice it before.
Thanks for noticing, will work on it and will let you know once I able to fix it.
–
Sach
Thanks @mani
thanx
Hay sachin can u solved the problem …………….?
plz send me solution..
This is wow article, i am also trying some possibilities.
you can find in my website “search” on header.
Having some problem, i couldn't not able to integrate “var sc = new GSearchControl();” function with “webSearch.setSiteRestriction” function.
Please reply me if found any helipful topic. Thanks for nice article.
I am requesting you to plz remove my website link after reading it.
as it should not come in search engine.
This is just perfect! Thank you so much for sharing
hello…sachin,
nice script. i am trying to bind google image events but i can't. actually i am searching google images with colors. but how to bind events here. here is my script.
<script src="http://www.google.com/jsapi?key=ABQIAAAA6A3orTpJebt5vPgaqKOlPhRVTWW_5xs2yfAqSYXwdRtQ52ArUhTNMisX2JlaFLxIgjvRrJnCJuU7dQ" type="text/javascript"></script>
<!–ABQIAAAA6A3orTpJebt5vPgaqKOlPhRVTWW_5xs2yfAqSYXwdRtQ52ArUhTNMisX2JlaFLxIgjvRrJnCJuU7dQ–>
<!–ABQIAAAAdBRq4IdOKgYvEmkWHIRWHxS10Wq1ffEAqzMUgOlgcLirMej1ORQNzAy6ph9PM9TEh9VQwlmRH6-Tdw–>
<script type="text/javascript">
/*
* How to search for images and filter them by color.
*/
google.load('search', '1');
function OnLoad() {
var searchControlDiv = document.getElementById("content");
var control = new GSearchControl();
control.setResultSetSize(GSearch.LARGE_RESULTSET);
control.setLinkTarget(GSearch.LINK_TARGET_PARENT);
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
var isearcher;
var colors = [
GimageSearch.COLOR_WHITE,
GimageSearch.COLOR_GRAY
];
for (var i=0; i < colors.length; i++) {
var colorSearcher = new google.search.ImageSearch();
colorSearcher.setRestriction(GimageSearch.RESTRICT_COLORFILTER,
colors[i]);
var colorName = colors[i].substring(0,1).toUpperCase() + colors[i].substring(1);
colorSearcher.setUserDefinedLabel(colorName);
control.addSearcher(colorSearcher, options);
};
// tell the searcher to draw itself and tell it where to attach
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
control.draw(searchControlDiv, drawOptions);
control.execute("jewellery");
}
google.setOnLoadCallback(OnLoad);
</script>
<style type="text/css" media="screen">
body, table, p{
background-color: white;
font-family: Arial, sans-serif;
font-size: 13px;
}
.gsc-trailing-more-results {
display : none;
}
.gsc-resultsHeader {
display : none;
}
.gsc-results {
padding-left : 0px;
}
.gsc-control {
width : 800px;
}
.gsc-tabsArea {
margin-bottom : 5px;
}
</style>
</head>
<body>
<div id="content">Loading…</div>
</body>
Thanks Kalpana…U done a gr8 job
So great! But you can help me add Color and Size select to you code
Thanks,
Yeah, Let me know how the way you want the color changes…
Hi Sachin,
Do you have the documentation for this project which you did? It will be helpful for me to understand how you developed this system.
Many thanks
Ravi.
This code broke a few days ago. The images do not size based on the CSS anymore, and source of the images doesn't work either (if you click on an image in your demo, you get a "X" instead of the actual image now). Any ideas how to fix this?
I've had this script running on my new site for the past couple weeks with it working perfect. But today, when I logged on, I noticed an error on both my site your demo, that just appeared today.
When clicking the image, the href (as the $(this).attr('href')) was displaying the incorrect src for the image. Instead of taking the image file, it was returning the main directory of where the image was located.
For example, an image in http://www.domain.com/images/image.png only showed the link for http://www.domain.com/images/ when clicked on.
I noticed this all of a sudden happened in your script demo and my script. Is this a temporary problem you think or has there been a change in the Google Image Search API?
You'll see what I mean when you go to your demo and click an image. It won't return an image in the imageContainer, because it's grabbing the wrong href.
Great article, thanks!
Is there any way to preload a query? Or to use this code just to fetch results (no search input form)?
Just a small bug:
when you click an image, for the image src it reads the site url instead of the image url.
thus image is not shown