Google Custom Search in a Lightbox!

There are several tutorials on the Internet on how-to integrate the Google Custom search in your static website, but the results are not very attractive. The older iframe version doesn’t fit perfectly in most of our templates and the style for ads and results doesn’t look good in the past. A few month Google has released some nice new features:

• Custom search element placements
• Custom styles and themes using CSS
• Promotions, set your own premium results for specific search queries
• A new AJAX powered CSE using the Google AJAX API loader

With all these new features the CSE (Custom Search Engine) becomes very attractive to use it on your own site as site search. In this tutorial we show you how-to add the custom search feature to you site using jQuery, the Thickbox plugin and the AJAX API provided by Google. To do this a result page is not necessary anymore, we show only a search box somewhere on a particular website.

Including the Google API, jQuery and the Thickbox plugin

First include the following rows to your page HEAD, you need to add them on every page where you like to show the search box.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />
<script type="text/javascript" src="thickbox.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOURAPYKEY"></script>

To use the Google API you need to register an API key for your website, request a key here.

HTML code for the search box

Below the simple HTML code for the search form and the container for the results. Place both somewhere on your webpage.

<div id="searchcont">
 <label for="query_input">Search Query: </label>
 <input type="text" id="query_input" />
 <input type="button" value="ok" id="searchbtn" />
</div>
<div id="resultcont">
 <div id="title" style="visibility:hidden;"><a href="#">Close</a></div>
 <div id="results"></div>
</div>

jQuery code snippet

The following JS code will load the Google API and if the user has clicked the search button the customSearchControl is initiated, the Thickbox is called, the title inside the Thickbox becomes visible, the result element is prepared and at last the input element value is executed for the search query. Add this code in your page’s HEAD surrounded by some script tags.

google.load('search', '1');
$(document).ready(function() {
 $("#searchbtn").click(function () {
  var customSearchControl = new google.search.CustomSearchControl('UNIQUE_CSE_ID');
  tb_show("", "#TB_inline?height=480&width=800&inlineId=resultcont&modal=true");
  $('#title').css("visibility", "visible");   
  var drawOptions = new google.search.DrawOptions();
  customSearchControl.draw(document.getElementById("results"), drawOptions);
  customSearchControl.execute(document.getElementById("query_input").value);
 });
 $("#title a").click(function () {
  tb_remove();
  $('#title').css("visibility", "hidden");   
  $("#results").hide();
 });
});

The other click event is used to hide the Thickbox, the event will hide the title and hides also the results. The last action is needed because we show an inline element, if we don’t hide the content the results are still visible after the Thickbox is closed.

That’s all, simple or not? The code above needs of course some styling. I used a slightly modified version for my network site search on this blog. If you search for “wordpress” you see the “Web promotion” feature I mentioned above.