pubsub-demo.js

## pubsub-demo.js

// Note that this uses my Pub/Sub implementation, which is slightly different than
// phiggins' in that jQuery custom events are used, and as such the first event handler
// argument passed is the event object.
//
// jQuery Tiny Pub/Sub: A really, really, REALLY tiny pub/sub implementation for jQuery
// https://gist.github.com/661855


// The "traditional" way.

// On DOM ready, bind a submit handler to form#search that performs an
// AJAX request, updating the DOM with search results upon completion.
jQuery(function($){

  $('#search').submit(function(e){
    var term = $.trim( $(this).find( 'input[name="q"]' ).val() );

    if ( term ) {
      e.preventDefault();

      $.getJSON(
        'http://query.yahooapis.com/v1/public/yql?format=json',
        { q: getYQLQuery( term ) },
        function(resp){
          var html,
              tmpl = '<li><a href="{{url}}">{{title}}</a></li>';

          if ( resp.query && resp.query.count > 0 ) {

            html = $.map( resp.query.results.result, function(result){
              return tmpl
                .replace( '{{url}}', result.url )
                .replace( '{{title}}', result.title )
            }).join('');

            $('#results').html( html );
          }
        }
      );
    }
  });

  // YQL helper function.
  function getYQLQuery( term ) {
    return 'select title,url from search.news where query="' + term + '"';
  }

});


// The "pub/sub" way.

(function($){

  // Initiate a search.
  $.subscribe( '/search/term', function( term ) {
    $.getJSON(
      'http://query.yahooapis.com/v1/public/yql?format=json',
      { q: getYQLQuery( term ) },
      function(resp) {
        if ( resp.query && resp.query.count > 0 ) {
          $.publish( '/search/results', [ term, resp.query.results.result ] );
        }
      }
    );
  });

  // Update the search term input if the term changes.
  $.subscribe( '/search/term', function( term ) {
    $('#search input[name="q"]').val( term );
  });

  // YQL helper function.
  function getYQLQuery( term ) {
    return 'select title,url from search.news where query="' + term + '"';
  }

  // Display search results.
  $.subscribe( '/search/results', function( term, results ) {
    var tmpl = '<li><a href="{{url}}">{{title}}</a></li>',
        html = $.map(results, function(result){
          return tmpl
            .replace( '{{url}}', result.url )
            .replace( '{{title}}', result.title )
        }).join('');

    $('#results').html( html );
  });

  // On DOM ready, bind a submit handler to form#search that simply
  // publishes the search term.
  $(function(){
    $('#search').submit(function(e) {
      var term = $.trim( $(this).find( 'input[name="q"]' ).val() );

      if ( term ) {
        e.preventDefault();

        $.publish( '/search/term', [ term ] );
      }
    });
  });

})(jQuery);


// But wait.. a whole new "previous searches" feature.. with minimal effort!

(function($){
  var searches = {};

  // Prepend a search term to ul#searches upon each new search,
  // deleting any existing search for that term.
  $.subscribe( '/search/term', function( term ){
    if ( searches[ term ] ) {
      searches[ term ].remove();
    }

    searches[ term ] = $( '<li><a href="#">' + term + '</a></li>' );
    searches[ term ].prependTo( '#searches' );
  });

  // On DOM ready, bind a delegated click listener to ul#searches
  // that re-publishes the search term.
  $(function(){
    $('#searches').delegate( 'a', 'click', function(e){
      e.preventDefault();

      var term = $(this).text();
      $.publish( '/search/term', [ term ] );
    });
  });

})(jQuery);