I've got following code, which should get the value of a input field, send the value to imdbapi.org and process the JSON sent back. I included a element showing the value of the input field, but with some strings it cuts off the string. See this test case
$("form > input#movname").keyup(function() {
var inputval = encodeURI($("form > input").val());
$.getJSON('http://imdbapi.org/',
{
title: inputval,
plot: "none",
limit: "5"
},
function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="'+val.imdb_id+'">');
items.push('<img src="'+encodeURI(val.poster)+'" />');
items.push('<strong class="title">'+val.title+'</strong><br />');
items.push('<div>'+val.rated.replace("_"," ")+'</div>');
items.push('</li>');
});
items.push('<li id="debug">');
items.push('<img src="src/nocover.png" />');
items.push('<strong class="title">'+$("form > input").val()+'</strong><br />');
items.push('</li>');
var html = items.join('');
$("#suggestions").html("");
$('<ol/>', {
'class': 'moviessuggestions',
html: html
}).appendTo('#suggestions');
});
});
Looks like limit
is unnecessary (wrong usage?), use
{
title: inputval,
plot: "none"
}
and it works fine.