How to build search into your site with JQuery and Yahoo!
Yahoo have a hard time fighting off the image of being bridesmaid to Google’s bride. However, they have a decided knack for turning out really cool developer toys! For example, check out the Yahoo User Interface library, Yahoo Pipes, or their latest baby, Yahoo BOSS.
Short for ‘Build your Own Search Service’, Yahoo have pretty much opened up their entire search service via an API. With an unrestricted number of queries, and complete control over presentation of results, you can really go to town with this one!
Getting started is easy; simply get yourself an API key here. Go on, I’ll wait.
With that done, anyone with basic knowledge of PHP and JQuery can easily build a search application!
Check out my demonstration here.
There are two pages involved in this demonstration. The first page displays the form, and contains the necessary JQuery code to fire off an AJAX request to the second page. The second page takes the posted value, fires off a request to the API, and returns the result.
Without further ado, here’s the JQuery:
$(document).ready(function(){
$('#results').hide();
$('#search').click(function(){
$('#results').hide();
searchterm = $('#searchterm').val();
$.post('getresult.php', {query: searchterm}, function(data){
$('#results').html(data).show('slow');
});
})
})Nothing too horrendous here; hide the results division, grab the term to be searched for, fire off an AJAX request, and put the returned data in the results div. Show it slloooooowly.
The code in ‘getresult.php’ isn’t much more complex; you can see it here.
That’s all there is to it! (At least for this very basic example.)
Once again, you can see a demonstration here.
I’m sure there must be loads of ideas for mashups out there; let’s hear some of your thoughts!
August 19th, 2008 at 2:42 am
[...] How to build search into your site with JQuery and Yahoo!Build your site search with jQuery and Yahoo. [...]
August 19th, 2008 at 4:02 pm
What, no YUI?
September 4th, 2008 at 12:00 am
Graham here from the BOSS team at Yahoo! Thanks for the props! If you build a mashup with BOSS, let us know about it. We’re always looking for innovative apps to show off. Send me an email (gmudd at yahoo-inc.com) or tag on delicious with “bossmashup.” Thanks!
Graham
October 12th, 2008 at 2:11 am
This is a very nice looking project. Nice work
October 12th, 2008 at 7:25 am
Nice use of JQuery and AJAX.
I should have thought of it! Nice work John.
December 19th, 2008 at 4:50 am
I love yahoo pipes. When I create squidoo lenses, I can create a custom feed to put in the RSS module. Good stuff. Question is, will yahoo ever compete head on with Google? Hard to say
December 30th, 2008 at 2:47 am
You have to love some of the development tools Yahoo have been creating recently, this is no exception. Excellent use of jquery, AJAX and php.
January 3rd, 2009 at 10:34 am
Wow, BOSS looks really good, maybe its the Facebook Connect for search and we will see some cool apps in the next time
January 20th, 2009 at 11:13 am
Hi I also have a search engine based on Yahoo Boss. You can download the PHP script from my blog if you want.: http://www.subscribetomyblog.com/spotlight/yahoo-boss-php-code-examples-are-hard-to-come-by. Do you by the way have a PHP script for image search with Yahoo Boss?
February 25th, 2009 at 1:36 pm
Boss is looking really good! Excellent Jquery, looks smooth.
April 8th, 2009 at 9:52 pm
I love the jquery and boss owns!
May 22nd, 2009 at 1:29 am
This looks great, and almost exactly what I’m looking for, but is it possible to make it so it only searches your site and not the whole net? If so, how?