// 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);
I think this may need an update: the current implementation of your pub/sub strips the event before calling the subscribed functions, right?
That should be all set now!
Awesome! And thanks for Pub/Sub, by the way -- I think its the most heavily used 16 lines of code in my whole current project :)