Using jQuery to search Twitter

amaniar — Wed, 07 Oct 2009 21:14:42 GMT

Twitter can be a very useful source for data aggregation on any particular topic. Am building an application that will search twitter using their API and then display the results using jQuery.

There are 2 ways of accomplishing something like this. We can either do the processing at the server and then populate the page or talk to Twitters REST based api directly from the client.

Methods to retrieve data from the Twitter API require a GET request.
Methods that submit, change, or destroy data require a POST. A DELETE request is also accepted for methods that destroy data. The API presently supports the following data formats: XML, JSON, and the RSS and Atom syndication.

We shall use jQuery to make a GET request into Twitter and search for the 10 most recent Tweets for a search term and then get additional tweets as required. You can refer to the search API here:
http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search

According to the API a sample search url would look like this:
http://search.twitter.com/search.json?q=searchterm&rpp=10&lang=en&callback=?
where:
q is the search term
rpp is the number of tweets desired
the callback=? is required for cross domain calls
use lang to search for tweets in a specific language only

Now we shall write some jQuery to make the request and process the returned JSON.

The completed application will allow us to search twitter. Top 10 tweets will be displayed with the ability to load more tweets.

We add some controls to the html to be able to search and display the content.

<div>

</div>

</div>

On dom ready we attach a click event to the searchButton to empty old tweets from the main container and hide the getMoreTweetsButton and then call the GetTweets function passing in the search text from the textbox.

$(document).ready(function() {

var basehUrl = "http://search.twitter.com/search.json";

$('#searchButton').click(function() {

$("#tweetMainContainer").empty();

$("#getMoreTweetsButton").hide();

GetTweets($('#searchText').val(), 10);

});

$("#getMoreTweetsButton").hide();

});

The GetTweets function accepts a query and count and performs the desired search. On success the ApplyTwitterTemplate function processes the data. Note we use the getJSON method to get the json.

function GetTweets(query, count) {

var searchUrl = "http://search.twitter.com/search.json?q=" + query + "&rpp=" + count + "&lang=en&callback=?";

$.getJSON(searchUrl, function(data) {

ApplyTwitterTemplate(data);

});

}

In this sample we shall use a jQuery addon called jTemplates to process the returned json data. Its basically a templating engine that makes creating dynamic dom elements fast and easy.
Read more here: http://jtemplates.tpython.com/

In the ApplyTwitterTemplate function we populate a clone of the tweetSubContainer div with the jTemplate (Twitter.htm) and then we append the resulting html to the tweetMainContainer div. We also use the next_page property of the returned json to get the next page of tweets when the getMoreTweetsButton is clicked.

function ApplyTwitterTemplate(data) {

$tweetSubContainer = $("#tweetSubContainer").clone();

$tweetSubContainer.hide();

$tweetSubContainer.setTemplateURL('Twitter.htm',

null, { filter_data: false });

$tweetSubContainer.processTemplate(data);

$("#tweetMainContainer").append($tweetSubContainer);

//show get more button and set next page url

$("#getMoreTweetsButton").unbind('click', null);

$("#getMoreTweetsButton").click(function() {

GetMoreTweets(data.next_page);

}).show();

$tweetSubContainer.fadeIn("slow");

}

The Twitter.htm template is basically a template that binds to the returned data and generates the html for us. Within the template we loop through all the tweets and populate the html using various properties of the JSON objects. For example from_user is the username and text is the actual tweeted text.

{#foreach $T.results as tweet}

<tr>

<td>

</a>

</td>

<td>

<strong><a href="http://twitter.com/{$T.tweet.from_user}">{$T.tweet.from_user}</a></strong>

{$T.tweet.text}<br />

Created on: {$T.tweet.created_at}</span>

</td>

</tr>

<tr>

<hr />

</td>

</tr>

{#/for}

</table>

Finally we implement code to get and append additional tweets to the mainTweetContainer when the getMoreTweetsButton is clicked. Note that the query in this case is the next_page property returned in the previous call.

function GetMoreTweets(query) {

var searchUrl = "http://search.twitter.com/search.json" + query + "&callback=?";

$.getJSON(searchUrl, function(data) {

ApplyTwitterTemplate(data);

});

}

Checkout the code in action here.

Download Code: