-
-
Save cowboy/743922 to your computer and use it in GitHub Desktop.
Two approaches: "Traditional" vs Pub/Sub (via rmurphey)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 :)