// JS CODE
$(document).on( 'pagebeforeshow' , '#searchpage' , function (){
var smovie = "" ;
$(document).on( "vclick" , "#go" , function () {
smovie = $( "#movie" ).val();
if (smovie) {
$( "#movies" ).empty();
var apikey = "MYAPIKEY" ;
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0" ;
// construct the uri with our apikey
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = smovie;
// send off the query
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "jsonp" ,
success: searchCallback
});
// callback for when we get back the results
function searchCallback(data) {
$( ".resluts" ).html( 'Found ' + data.total + ' results for ' + query);
var movies = data.movies;
$.each(movies, function (index, movie) {
$( "#movies" ).append( "<li><a><img src='" + movie.posters.thumbnail + "' /><h2>" + movie.title + "</h2>" + "<p>" + "Score: " + movie.ratings.critics_score + "%" + "</p></a></li>" ).listview().listview( "refresh" );
});
}
}
});
});
// HTML CODE
<div data-role = "main" class = "ui-content" >
<input type = "search" name = "movie" id = "movie" value = "" placeholder = "Movie to Search..." />
<input type = "button" id = "go" value = "Search" />
<div class = "resluts" ></div>
<ul data-role = "listview" id = "movies" > </ul>
</div>