In this tutorial I’m gonna tell you how to make your own Google Search Engine API using jQuery &  Google Custom Search Engine   (CSE). We can make it Instant search by adding small lines of jQuery Code. Google Search Engine API allows you to create a custom search engine for your website. To get the new search engine – Register you website, get the code and place it on your website header, Thats it.

google search engine api

Step 1 : Register Your website to Create Google Search Engine API

Visit this page Google Custom Search Engine and enter your site name and click “Create” to create a google search engine for your website

Google Search Engine API - Create
Google Search Engine API – Create
  1. Add the Name of the Search Engine
  2. Add your blog URL. Again, I am planning to add this custom search engine only to my personal blog. Therefore, I will only add my blog URL. If you like, you can add other website or your other blog URLs here.
  3. Select your preferable language.
  4. Click the Create button at the very bottom.
Google Search Engine API - Created Successfully
Congratulations Screen – Google CSE

 

Please click  Receive Code  button to get the html code for Google Search Engine.

You will see the below screen and also You’ll get your  cx code  (called Search Engine ID). Please note your CX code.

Google Search Engine API - HTML code
Google Search Engine API – HTML code

Now we will see how to make your search engine to give Instant results using jQuery

Step 2: Design a Search Box

For demo, I have used twitter boostrap design. You can customize the search box design on your own. Please check my article on windows metro style search box using css

Bootstrap code for simple search box


<input type="text" class="form-control" onkeyup="executeQuery();" placeholder="search.." name="search" id="search-keyword">

 executeQuery()  function on onkeyup attribute is used to call the google search engine API with the search parameter.

Code To Call Google Search API


var customSearchControl = null;
function executeQuery() {
var textNode = document.getElementById('search-keyword');
if ((textNode.value == '')) {
customSearchControl.clearAllResults();
} else {
customSearchControl.execute(textNode.value);
}
}
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
customSearchControl = new google.search.CustomSearchControl('your cx code');
customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchResultsOnly();
customSearchControl.draw('cse_g', options);
}, true);

The above will get the search query using attribute  search-keyword  and execute the call to google to render the results in the div with ID  cse_g 

Code for Search Results


<div id="cse_g"></div>

Step 3: jQuery code to clear search

Below code is used to clear the search query and its results


$(document).ready(function() {
// if text input field value is not empty show the "clear search" button
$("#search-keyword").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#search-keyword").val()) == "") {
$("#x").fadeOut();
}
});
// on clicking "clear search", delete input field value, results and hide "clear search"
$("#x").click(function() {
$("#search-keyword").val("");
$(this).hide();
$("#cse_g").html('');
});
});

Thats it. Now you have got your own custom google search API using javascript and google CSE.

Please check the live demo and subscribe to my blog to get live updates via email.

Related Posts