Not able to pass JSON data to Select2 plugin

Not able to pass JSON data to Select2 plugin

I am using select2 plugin and using asp.net webpage to return JSON data.
My page is returning following data.
{"total":10,"movies":[{"title":"fanme","critics_consensus":"10","synopsis":"Name"},{"title":"fanme","critics_consensus":"10","synopsis":"Name"},{"title":"fanme","critics_consensus":"10","synopsis":"Name"},{"title":"fanme","critics_consensus":"10","synopsis":"Name"},{"title":"fanme","critics_consensus":"10","synopsis":"Name"}]}
Problem : After the search, even though the data is returned by the
request, select know is not loading the data and showing searching image.
Please see the below image for more details :

I am using following code:
<script type="text/javascript">
function movieFormatResult(movie) {
var markup = "<table class='movie-result'><tr>";
if (movie.posters !== undefined && movie.posters.thumbnail !==
undefined) {
markup += "<td class='movie-image'><img src='" +
movie.posters.thumbnail + "'/></td>";
}
markup += "<td class='movie-info'><div class='movie-title'>" +
movie.title + "</div>";
if (movie.critics_consensus !== undefined) {
markup += "<div class='movie-synopsis'>" +
movie.critics_consensus + "</div>";
}
else if (movie.synopsis !== undefined) {
markup += "<div class='movie-synopsis'>" + movie.synopsis +
"</div>";
}
markup += "</td></tr></table>";
return markup;
}
function movieFormatSelection(movie) {
return movie.title;
}
</script>
$(document).ready(function () {
$("#e6").select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request
we use Select2's convenient helper
url: "data.aspx",
//"http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
quietMillis: 1000,
data: function (term, page) {
return {
q: term, // search term
page_limit: 10,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not
use so this example keeps working
};
},
results: function (data, page) { // parse the results into the
format expected by Select2.
// since we are using custom formatting functions we do
not need to alter remote JSON data
return { results: data.movies };
}
},
initSelection: function (element, callback) {
var id = $(element).val();
if (id !== "") {
//$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"
+ id + ".json", {
$.ajax("data.aspx", {
data: {
apikey: "ju6z9mjyajq2djue3gbvv26t"
},
dataType: "jsonp"
}).done(function (data) { callback(data); });
}
},
formatResult: movieFormatResult, // omitted for brevity, see the
source of this page
formatSelection: movieFormatSelection, // omitted for brevity,
see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown
taller
escapeMarkup: function (m) {
return m;
} // we do not want to escape markup since we are displaying html
in results
});
});
Please let me know if I need to change the format of the JSON that I am
returning or if i need to set any other property.