Simple Ajax Search Widget for Blogger / Blogspot

Ajax search is now mainly only found on official google blogs as it is a little complicated to implement.So i thought of simplifying it for you..

Her you can get a tabbed ajax search for your blog.
You can see two different implementation demos of the ajax search widgets here and here
You may test it by searching something like widget over there
You can use the ESc key or the close button there to close the search results..

So here are the steps to get this amazing widget running on your blog..
First of all get a ajax api key for your blog by going here
Now copy out the big code below into a test file.

<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/> <script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=YourApiKey' type='text/javascript'/> <script type='text/javascript'> var searchControl; window.onload = function() { onLoad(); } function onLoad() { // Create a search control searchControl = new GSearchControl(); // add a site-limited web search, with a custom label var siteSearch = new GwebSearch(); siteSearch.setUserDefinedLabel(&quot;YourBlogName&quot;); siteSearch.setSiteRestriction(&quot;YourBlogUrl&quot;); searchControl.addSearcher(siteSearch); // add a regular web search, with a custom label &#39;Web&#39; var webSrearch = new GwebSearch(); webSrearch.setUserDefinedLabel(&quot;web&quot;); searchControl.addSearcher(webSrearch); // setting the draw mode for the Google search var drawOptions = new GdrawOptions(); // use tabbed view drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED); // set the input field (instead of the default one) drawOptions.setInput(document.getElementById(&#39;query&#39;)); // actually write the needed markup to the page searchControl.draw(document.getElementById(&quot;searchcontrol&quot;), drawOptions); // set the google logo container GSearch.getBranding(document.getElementById(&quot;branding&quot;)); } var query = null; document.onkeydown = function(event) { kd(event); }; function kd(e) { // make it work on FF and IE if (!e) e = event; // use ESC to clear the search results if (e.keyCode == 27) searchControl.clearAllResults(); // get the input field if (query == null) query = document.getElementById(&#39;query&#39;); // and move the focus in there query.focus(); } </script> <style type='text/css'> #searchcontrol { width:inherit; margin-left:auto; margin-right:auto; text-align:left; } .gsc-control { width: 100%; } </style>

Make the following replacements to the code
Replace YourApiKey with the API key you obtained from google
Replace YourBlogName with the name of your blog
Replace YourBlogUrl with the url of your blog
After you have made these replacements copy that code
Now goto Blogger Layout> Edit Html and paste the edited code just after the] ] ></b:skin> tag

The next part is easier.. just click on the widget installer below choose the size of the search box and add the widget to your blog..
Now you have 2 options
You can either have the search box and the search results at the same place
or you may position them at two different positions
1)Option One
Combo Widget which displays the search box and search results together

2)Option Two
Separate widgets to show the search box and the search results
If you wish to place the search box and search results at two differesnt positions,then you can use these 2 widgets separately
Here is the search box widget alone. Install it and position it whereever required by drag and drop


Here is the search results widget alone.Install it and drag it to above your blog post widget(that is the best place)

<div id="searchcontrol"></div>

If you have any doubts or need any modifications in the search please let me know.. and also help me in spreading this ajax search widget
Inspired by Hoctro
Note:-
If you liked the post then digg this post here and help me in spreading this trick to other bloggers around...
Note: If you are reading this in a Feed Reader the widget installer wont be displayed properly.So visit the actual article on the site to install the widget.

Bookmark this post: