Two approaches: "Traditional" vs Pub/Sub (via rmurphey)
// 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); |
This comment has been minimized.
This comment has been minimized.
That should be all set now! |
This comment has been minimized.
This comment has been minimized.
gabrielgrant
commented
Jan 18, 2011
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 :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
gabrielgrant commentedJan 18, 2011
I think this may need an update: the current implementation of your pub/sub strips the event before calling the subscribed functions, right?