Google Custom Search in a Lightbox!
There are several tutorials on the Internet on how-to integrate the Google Custom search in your 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 CSS code for the styling.
Published in: Google Services · jQuery Code
@Randy Comeau – Me too, :)
Thanks for the information. Very useful.
What if I am trying to implement the same method using a different lightbox, where would i change the code? I am using facebox (http://famspam.com/facebox)
I would appreciate the advice!
Hi,
Looks to me that both scripts act similar. I have never seen the facebox before (looks like the orig. lightbox). What you need is the function that will close the window.
I can’t see that function on the linked page.
heres the function: $.facebox.close();
I still cannot figure out how to implement it
Hi,
there are only two rows you need to replace:
1.
tb_show("", "#TB_inline?height=480&width=800&inlineId=resultcont&modal=true");Not sure what you need to use for the other script, since all example are based on a link the user need to click.
The 2nd one is simple, just use the “close” function instead of:
tb_remove();I’m still using the thickbox because the code is very flexible and the difference to the facebox I notice is just the style.
Is there away to track the search results in Google Analytics? It only seems to work when using the iframe method.
Brian, what kind of information do you like to track? The searches or the clicks?
I want to track the search phrases. I like having the search box on everypage and displaying the results without redirecting the user to a results page.
The initial search like here on this site is not a problem. Let me check this, maybe we can use some smart jQuery code?
I am having a problem seeing the results in google analytics. The searches are registering in CSE control panel, but it won’t show me the phrases. In analytics, under Content, then Site Search, the results are 0.
Brian,
I use on this site the beta version of GA (asynchronous) and it should be possible to track the initial search action by the jQuery click event, check this manual page for the options:
http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html
I don’t see so much searches on my site :(
Hi!
Script has few problems:
1. After you have closed the thickbox window, and you try to search on the same page again (without refreshing the page), thickbox window shows up blank – no search results. You have to refresh the page in order to search again. Tested in Chrome and Firefox.
2. Can the search box react on hitting “Enter” after you have entered your phrase instead of having to click on “Go” button?
Great implementation of Thickbox, I’m sure my users will love it!
Thanks for your response!
Hi Antun,
do you get an empty lightbox on this site as well? I tried it with firefox and it works as it should.
About your second question, there are several examples on how-to submit a form upon “enter”.
This one should work: http://plugins.jquery.com/project/SafeEnter
Hi Olaf,
thanks for a fast response!
I’m not getting the blank thickbox on this site.
DK what I did wrong, I followed your tutorial.
You need to add the “close” link.
The “X” right to the search button is used to clear the text field. On your site it’s currently not possible to close the box.
It’s there, just translated to Croatian.
It says “Zatvori” in the left upper corner.
I see, it seems like that I use a modified version, check my source and compare.
Need to check the tutorial example later…
i am creating an ask search engine
i want the results to open up in a jquery popup like the google one here
can someone assist
EDIT: I removed your link because it’s not related to the tutorial here.
Hello Malcolm,
I don’t think that this code example will work on your site. Do you ever tried a lightbox in one of your websites?
Great work, is there a way to trigger the search when pressing return – so you do not have to press the “search” button?
Also, could you tell me where I find the style sheet for search results being shown from Google? That is, where should I put styling for that (if possible).
Hello Jarle,
yes it’s possible trigger the button to submit the form. Since it’s currently a “click” event, you need to add the second event too. Search for something like “submit form on enter”, maybe you need to enter some keywords like “javascript” or “jquery”. There are several tutorials and examples.
About the result set style, this is something you do in the CSE panel. I remember me that there is also an option to have your own stylesheet.