jQuery: Link override with search box
Posted: November 26th, 2008 | Author: Rob Searles | Filed under: JavaScript | Tags: jQuery | Comments
Just been working on a little something for a client involving Google Custom Search Engines.
The app we’re building uses 4 different search engines which are all specialised in a certain area. There is a central “Overview” page that gets the top results for the search from each of the search engines, plus there are normal links above the search box that, when clicked on should take the user directly to the Custom Search Engine results page for the string in the search box.
Sounds quite straightforward, but the links also save the current search (which may be different to the search box if the user has just entered a search into the box) so in this case, the old search needs to be stripped and the new search carried forward to the Custom Search Engine.
So it’s a little more tricky, but fortunately using jQuery and the URL Parser plugin by Mark Perkins I was able to cut out most of the tricky stuff.
Below is a little demo to illustrate the main part of the jQuery usage. Before you conduct a search, you should be able to click on the links to go and search Google for those keywords (jQuery, CakePHP, Ruby On Rails and No Search conducted). If you enter a string in the box and hit the “Search” button, you’ll go to Google and search for the string. However, if you enter a string in the search box but then click on a link, you’ll be taken to Google and search for the string.
This isn’t quite how it works on the client site, but is enough to show how the jQuery is being used.
Search Google
Javascript code in the <head> tags is:
<script src="/javascript/jquery.1.2.6.js" type="text/javascript"></script> <script src="/javascript/jquery.url.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(function(){ $("#jQuerySearchExample a").click(function () { var path = "http://www.google.co.uk/"; path += jQuery.url.setUrl($(this).attr("href")).attr("path"); path += "?"+$("#jQuerySearchExampleInput").serialize(); $(this).attr("href", path); }); }); // --></script>
And the HTML is as follows:
<ul id="jQuerySearchExample"> <li><a href="http://www.google.co.uk/search" target="_blank">No Search</a></li> <li><a href="http://www.google.co.uk/search?q=jquery" target="_blank">jQuery</a></li> <li><a href="http://www.google.co.uk/search?q=CakePHP" target="_blank">CakePHP</a></li> <li><a href="http://www.google.co.uk/search?q=ruby+on+rails" target="_blank">Ruby On Rail</a></li> </ul> Search Google <form action="http://www.google.com/search" method="get"> <input id="jQuerySearchExampleInput" name="q" type="text" /> <input type="submit" value="Search" /> </form>
As you can see, I use
jQuery.url.setUrl($(this).attr("href")).attr("path");
To strip out the current query string from the hard coded URL and then
"?"+$("#jQuerySearchExampleInput").serialize();
To replace it with the string within the search box.
Took a bit of faffing about, but works quite well
