Google Custom Search API are wonderful tools to create some awesome search engine like tools. Also if you want to add a search option to your website and customize the look and feel of your search results, Google Custom Search API serve best to you. I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API.
I will show the code for one of the search api that I implemented in demo page. Let us see how to implement Web Search API.
Step 1: Generate Google Search API Key and Include JavaScript
In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key. Sign up for Google API Key Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code.
We will create a textbox and a button that will take input for search. And a DIV that will be populated by results:
<inputtype="text"title="Real Time Search"name="searchbox"/><inputtype="button"id="searchbtn"value="Search"onclick="search(searchbox.value)"/><divclass="data"id="web-content"></div>
Code language:HTML, XML(xml)
When user will write a query and push Search button, a request will be made to Google Search using Custom Search API and the results are fetched. These results are then copied into the DIV.
Step 3: JavaScript to call Google Search API
We will use following JavaScript to call the Google Search API and copy the results in our container DIV.
The code in plain english is:
1. Create an object to connect Google Web search using class google.search.WebSearch.
2. Set a callback function that will get call once the results for the search are fetched.
3. Call the execute() method with search query as argument.
4. In callback function, iterate through the results and copy it to container DIV.
var webSearch;
webSearch = new google.search.WebSearch();
webSearch.setSearchCompleteCallback(this, webSearchComplete, [webSearch]);
functionwebSearchComplete (searcher, searchNum) {
var contentDiv = document.getElementById('web-content');
contentDiv.innerHTML = '';
var results = searcher.results;
var newResultsDiv = document.createElement('div');
newResultsDiv.id = 'web-content';
for (var i = 0; i < results.length; i++) {
var result = results[i];
var resultHTML = '<div>';
resultHTML += '<a href="' + result.unescapedUrl + '" target="_blank"><b>' +
result.titleNoFormatting + '</b></a><br/>' +
result.content +
'<div/>';
newResultsDiv.innerHTML += resultHTML;
}
contentDiv.appendChild(newResultsDiv);
}
functionsearch(query) {
webSearch.execute(query);
}
@vikas, yes sir.. I am using jQuery but I dont know why. I may became lazy to do document.getElementById() instead of $(‘#’). Yes I think there is still scope left in this example. :)
Thanks Nilesh :) Also, Let me know if you have some ideas on which I can write blogs. I always have shortage of things to write upon (Although there are millions of things in tech world).
and yah………………..since from 3 months i am trying my best to crack the google ajax search limit………….but still the result is same. i.e: 8 pages with 8 display is the maximum. so could you crack the result limit? send me the code in my mail……………[email protected]
Unfortunately, the code here does not return the same results as the google search engine. Try, for example, for the search string LTC1403. The results are very different.
hi i am new to all these technology. I dont know to implement it can you please post the code or mail me the code of demo site please i am trying to implement this for my college search.
and yah………………..since from 3 months i am trying my best to crack the google ajax search limit………….but still the result is same. i.e: 8 pages with 8 display is the maximum. so could you crack the result limit? send me the code in my mail………… [email protected]
The search API has been depreciated and hence I think your implementation doesn’t work now. But that’s a great implementation. Would you be willing to write it using the current custom search api?
hi i have developed a search engine like google, i want to do that if i search any thing on my search engine after that it’s link to google search data and store the first 5 link data in corresponding folder e.g pdf file store in pdf folder, doc file in doc folder etc.
Viral Proto looks amazing and quite efficient… .. Congrates…
jQuery is in use, you can still optimize and compact your code by utilizing it.
@dharmesh, Thanks for the comment
@vikas, yes sir.. I am using jQuery but I dont know why. I may became lazy to do document.getElementById() instead of $(‘#’). Yes I think there is still scope left in this example. :)
I liked this one. Keep it up.
Thanks Nilesh :)
Also, Let me know if you have some ideas on which I can write blogs. I always have shortage of things to write upon (Although there are millions of things in tech world).
hello sir your code is not working. why
Hi.. .You can write on face recognition in Java, PHP.
hi,
thank you very much for your modified google ajax codes. i like it. please send me more modified codes in my mail address.
and yah………………..since from 3 months i am trying my best to crack the google ajax search limit………….but still the result is same. i.e: 8 pages with 8 display is the maximum. so could you crack the result limit? send me the code in my mail……………[email protected]
hi Viral, can you write on “finding a location and its surronding 50 km places from its ZIP/PIN using google API”? thanx in advance.
Is it search only in my local webserver hosted in my office? Please guide me to do so.
Unfortunately, the code here does not return the same results as the google search engine. Try, for example, for the search string LTC1403. The results are very different.
i want to make a web search engine
sir , the results are correct but only 4 results are displayed
can you please help me how to increase the no of results shown
I’ve got the same problem.
Let me know, how can I display more results atleast 64 results and the page navigation should also be active.
hi i am new to all these technology. I dont know to implement it can you please post the code or mail me the code of demo site please i am trying to implement this for my college search.
thanks in advance
can u please guide me in google web search engine in php (same functionality with php)
sir , the results are correct but only 4 results are displayed
can you please help me how to increase the no of results shown
I am very new user … i dont understand coding much…i only know copy paste….can i use source code only of demo … replacing key value…
Great searching script?
I would like to add it to my website Coming Soon Live ! Can you help me out how to configure for my website?
Waiting for your reply!!!
itz working… great!
hello, i cant make my own key please help me i want to get the key i have a senior project and i need hlep :(
I want to implement google site search and results shown on other page.will you please guide me
and yah………………..since from 3 months i am trying my best to crack the google ajax search limit………….but still the result is same. i.e: 8 pages with 8 display is the maximum. so could you crack the result limit? send me the code in my mail………… [email protected]
Can we use the data obtained from search results like this .
For example if a user searches for a restaurant on our site and doesnt find it ( IN our DB) . Can we use these images and let him download it ?
Sir, Please suggest me a way to search without using google api:
such that maximum speed can be attained .
I can´t use. Anybody can send me in .zip?
Regards
The search API has been depreciated and hence I think your implementation doesn’t work now. But that’s a great implementation. Would you be willing to write it using the current custom search api?
I am facing a problem on google.search.WebSearch();
please give me clarification what is it? and what does it do?
Hi Viral,
Please send me the code to may email: [email protected]
Thanks
Jose
i am building a meta search engine … can u upload the similar information for Yahoo search
I think you can edit the post and remove the key request.. Google API no more needs the key request
Dear all,
I am try to run this query,but not show result,may be problem in Google API.
Plz send me setp for genrate Google Custome web search API.
Really Nice post to understand the concept …..
keep it up looking for new and advance posts.
Simply Great…!!!!
hi
i have developed a search engine like google, i want to do that if i search any thing on my search engine after that it’s link to google search data and store the first 5 link data in corresponding folder e.g pdf file store in pdf folder, doc file in doc folder etc.
anybody can do it?
Liked this one….very nice one
it shows only 4 results….what if I want to show 20 results in search page ?? can please help me on this
It doesn’t work……………………………………………………………………
hey can we put ads between two search result?
if yes than tell me how..please help me..
thank you in advance..
How can I limit the search to a specific topic?
Thanks
How do i take the query’s result?
Is there any way we can display more than 5 result entries ?
Thanks in advance :)
Gr8!!!
Please send me this ajax search code…. Thanks in advance :)
impressive work
Hi.. @Viral
Can we apply this code for site search ? by changing anything Or any idea to search for particular site only using this demo.?
Please reply i really need it urgent.
Thanx
Hi @Viral,
I can’t find any google api key. and code is not working.
Hello,
Nice tutorial.
can you suggest me if I want to get top 10 google first page search results urls by passing q=some keyword.. using search Api.
Thank You.
I have problem this code.
I want to top 200 results from google search api.
Thank you!.
i want above serach example with bsource code.pls send me.
The results are correct but only 4 results are displayed
can you please help me how to increase the no of results shown..
How to increase the search results.. please help me
hi i need java code for custom search api?
i found its working as nice…
(function() {
var cx = ‘003871072192078274339:x0sadj-7_em’;
var gcse = document.createElement(‘script’);
gcse.type = ‘text/javascript’;
gcse.async = true;
gcse.src = ‘https://cse.google.com/cse.js?cx=’ + cx;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(gcse, s);
})();
It should be documented in google search docs, really simply super
how to run a coding in netbeans
how to create api key
it’s not working
please help me
hello i am trying to use your code for custom search but according to me in my div. but code is not working.
Hello , I want to make database search E
It is not working anymore because of the following reason “The Google Web Search API has been officially deprecated. For more information on its deprecation, see https://developers.google.com/web-search/. We suggest you migrate to the Google Custom Search API. (see https://developers.google.com/custom-search/)”
Is there any way to fix it ?
Really Great work efforts