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

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

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>
Code language: JavaScript (javascript)

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>
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]); 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); }
Code language: JavaScript (javascript)

Click for Online Demo

View Comments

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

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

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

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

Share
Published by
Viral Patel
Tags: google google custom search JavaScript

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago