johnmccollum.co.uk

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!

Tags: AJAX, jquery, Search, Yahoo

This entry was posted on Thursday, July 31st, 2008 at 9:06 pm and is filed under AJAX, PHP, jquery, web development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.