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



49 Comments

  • dharmesh 29 October, 2009, 22:25

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

  • Vikas Bhagwagar 30 October, 2009, 10:52

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

    • Viral Patel 30 October, 2009, 18:57

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

  • Nilesh 30 October, 2009, 19:51

    I liked this one. Keep it up.

  • Viral Patel 30 October, 2009, 20:39

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

  • Nilesh 31 October, 2009, 10:35

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

  • tashi tsering 17 November, 2009, 18:37

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

  • tashi tsering 17 November, 2009, 18:39

    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……………tarsicherink@yahoo.com

  • sidhartha 11 March, 2010, 9:41

    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.

  • Nitin Saxena 3 July, 2010, 13:21

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

  • h 5 December, 2010, 3:07

    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.

  • Abhishek 5 December, 2010, 13:59

    i want to make a web search engine

  • Rajasivam 1 April, 2011, 11:20

    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 10 May, 2014, 17:39

      I’ve got the same problem.

  • Parul 2 May, 2011, 14:22

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

  • panindra nadig 10 August, 2011, 20:13

    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

  • Nayya 17 October, 2011, 13:26

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

  • Senthilkumar 20 December, 2011, 10:17

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

  • vaibhav 19 January, 2012, 19:20

    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…

  • Magson Fernandes 6 February, 2012, 16:30

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

  • sagor 25 May, 2012, 10:48

    itz working… great!

  • nour 29 May, 2012, 21:49

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

  • amit 6 June, 2012, 18:39

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

  • Raj 27 June, 2012, 9:09

    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………… indiravsp@yahoo.com

  • Karthik 6 July, 2012, 3:19

    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 ?

  • yogesh 22 August, 2012, 0:19

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

  • Daniel 23 October, 2012, 21:16

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

  • Manish 3 December, 2012, 19:15

    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?

  • mahesh 13 February, 2013, 19:20

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

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

  • Jose 15 February, 2013, 23:59

    Hi Viral,
    Please send me the code to may email: jvaa14@gmail.com
    Thanks
    Jose

  • Sourav 5 March, 2013, 18:02

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

  • akshat goel 10 April, 2013, 21:02

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

  • Kapil 15 April, 2013, 17:15

    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.

  • Rupali Jadhav 21 June, 2013, 13:10

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

  • Deepanshu kakkar 9 July, 2013, 19:05

    Simply Great…!!!!

  • shubham 22 July, 2013, 20:18

    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?

  • Parth Khunt 22 August, 2013, 10:36

    Liked this one….very nice one

  • Rakesh 11 September, 2013, 14:17

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

  • Kunal 22 September, 2013, 15:38

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

  • priyeshmarvi 10 October, 2013, 13:36

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

  • Marco 13 October, 2013, 14:43

    How can I limit the search to a specific topic?

    Thanks

  • Marco 13 October, 2013, 18:44

    How do i take the query’s result?

  • Ravi 27 October, 2013, 14:17

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

    Thanks in advance :)

  • Rifat M Huq 13 April, 2014, 11:31

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

  • Anil 29 April, 2014, 13:16

    impressive work

  • Nimish 14 May, 2014, 16:27

    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

  • Priya Varshney 2 June, 2014, 15:56

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

  • Vijaysinh Parmar 5 June, 2014, 0:26

    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.

  • Rahul 11 August, 2014, 11:02

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

    Thank you!.

Leave a Reply

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

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *