Create your own Search Engine(Interface) using Google Custom Search API

google-api-real-time-search
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.

DEMO


google-search-technology

DEMO

The Code

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.

<script src="http://www.google.com/jsapi?key=YOURKEY" type="text/javascript"></script>
<script type="text/javascript">
	google.load('search', '1');
</script>

Step 2: Add HTML Container for Web Search

We will create a textbox and a button that will take input for search. And a DIV that will be populated by results:

<input type="text" title="Real Time Search" name="searchbox"/>
<input type="button" id="searchbtn" value="Search" onclick="search(searchbox.value)"/>

<div class="data" id="web-content"></div>

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]);

function webSearchComplete (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);
}

function search(query) {
	webSearch.execute(query);
}

Click for Online Demo

Get our Articles via Email. Enter your email address.

You may also like...

62 Comments

  1. dharmesh says:

    Viral Proto looks amazing and quite efficient… .. Congrates…

  2. Vikas Bhagwagar says:

    jQuery is in use, you can still optimize and compact your code by utilizing it.

    • Viral Patel says:

      @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. :)

  3. Nilesh says:

    I liked this one. Keep it up.

  4. Viral Patel says:

    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).

    • manish says:

      hello sir your code is not working. why

  5. Nilesh says:

    Hi.. .You can write on face recognition in Java, PHP.

  6. hi,
    thank you very much for your modified google ajax codes. i like it. please send me more modified codes in my mail address.

  7. sidhartha says:

    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.

  8. Nitin Saxena says:

    Is it search only in my local webserver hosted in my office? Please guide me to do so.

  9. h says:

    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.

  10. Abhishek says:

    i want to make a web search engine

  11. Rajasivam says:

    sir , the results are correct but only 4 results are displayed
    can you please help me how to increase the no of results shown

    • htk says:

      I’ve got the same problem.

  12. Parul says:

    Let me know, how can I display more results atleast 64 results and the page navigation should also be active.

  13. panindra nadig says:

    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

  14. Nayya says:

    can u please guide me in google web search engine in php (same functionality with php)

  15. Senthilkumar says:

    sir , the results are correct but only 4 results are displayed
    can you please help me how to increase the no of results shown

  16. vaibhav says:

    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…

  17. 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!!!

  18. sagor says:

    itz working… great!

  19. nour says:

    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 :(

  20. amit says:

    I want to implement google site search and results shown on other page.will you please guide me

  21. Karthik says:

    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 ?

  22. yogesh says:

    Sir, Please suggest me a way to search without using google api:
    such that maximum speed can be attained .

  23. Daniel says:

    I can´t use. Anybody can send me in .zip?
    Regards

  24. Manish says:

    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?

  25. mahesh says:

    I am facing a problem on google.search.WebSearch();

    please give me clarification what is it? and what does it do?

  26. Sourav says:

    i am building a meta search engine … can u upload the similar information for Yahoo search

  27. akshat goel says:

    I think you can edit the post and remove the key request.. Google API no more needs the key request

  28. Kapil says:

    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.

  29. Rupali Jadhav says:

    Really Nice post to understand the concept …..
    keep it up looking for new and advance posts.

  30. Deepanshu kakkar says:

    Simply Great…!!!!

  31. shubham says:

    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?

  32. Parth Khunt says:

    Liked this one….very nice one

  33. Rakesh says:

    it shows only 4 results….what if I want to show 20 results in search page ?? can please help me on this

  34. Kunal says:

    It doesn’t work……………………………………………………………………

  35. priyeshmarvi says:

    hey can we put ads between two search result?
    if yes than tell me how..please help me..
    thank you in advance..

  36. Marco says:

    How can I limit the search to a specific topic?

    Thanks

  37. Marco says:

    How do i take the query’s result?

  38. Ravi says:

    Is there any way we can display more than 5 result entries ?

    Thanks in advance :)

  39. Rifat M Huq says:

    Gr8!!!
    Please send me this ajax search code…. Thanks in advance :)

  40. Anil says:

    impressive work

  41. Nimish says:

    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

  42. Priya Varshney says:

    Hi @Viral,
    I can’t find any google api key. and code is not working.

  43. Vijaysinh Parmar says:

    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.

  44. Rahul says:

    I have problem this code.
    I want to top 200 results from google search api.

    Thank you!.

  45. kantilal mote says:

    i want above serach example with bsource code.pls send me.

  46. arun says:

    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

  47. suman says:

    hi i need java code for custom search api?

    • Raja says:

      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);
      })();

  48. Umapathy says:

    It should be documented in google search docs, really simply super

  49. bharathi says:

    how to run a coding in netbeans

  50. bharathi says:

    how to create api key

  51. Daniel says:

    it’s not working

  52. Daniel says:

    please help me

  53. manish says:

    hello i am trying to use your code for custom search but according to me in my div. but code is not working.

  54. Niel says:

    Hello , I want to make database search E

  55. ghosty says:

    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 ?

Leave a Reply

Your email address will not be published. Required fields are marked *