Mustache Twitter
mustache.js is really nice. Here is a quick demo of mustache being used in conjunction with the twitter search api:
Here is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="mustache.js"></script> <script> $(function(){ var tweets = Mustache.compile($("#tweets").html()), results = $("#results"), query = $("#query"); $("#search").submit(function(e){ e.preventDefault(); var value = $.trim(query.val()); if (value.length > 0){ query.val(""); results.html("<h2>loading...<\/h2>"); $.getJSON("http://search.twitter.com/search.json?callback=?", {q : value}, render); } }); function render(data){ var html = tweets(data) .replace(new RegExp(data.query,"ig"), "<b>"+data.query+"<\/b>"); results.html(html).find("span").html(addLinks); } function addLinks(i, htm){ return htm.replace(/(https?\S+)/g, "<a href='$1' target='blank' >$1<\/a>"); } }); </script> <style> body,html{ font-family : sans-serif; font-size : 13px; } h1,h2,h3{ margin : 4px; padding : 4px; } .tweet{ padding : 4px; margin : 4px; border : 1px solid #ccc; overflow : hidden; } .tweet img{ float : left; margin : 4px; } </style> </head> <body> <h1>Twitter Search</h1> <form id="search"> <input id="query" type="search" placeholder="search..."/> <button>go</button> </form> <div id="results"></div> <script id="tweets" type="text/html"> <h2>Results for "{{query}}"</h2> {{#results}} <div class="tweet"> <h3>{{from_user}}</h3> <img src="{{profile_image_url}}" /> <span>{{text}}</span> </div> {{/results}} </script> </body> </html> |