我正在使用RottenTomatoes电影API。我有以下代码,但我似乎无法将电影的概要打印到输入下面的屏幕。我知道我在这里做错了吗?
请参阅此处的AJAX调用示例:http://developer.rottentomatoes.com/docs
<formx>
<input id="autocomplete" type="text" placeholder="Movie name" name="search">
</form>
<div id="search_results">
</div>
<script>
$(function() {
$("#autocomplete").autocomplete({
delay: 500,
minLength: 3,
source: function(request, response) {
$.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?callback=?", {
apikey: "api_key_here",
q: request.term,
page_limit: 10
}, function(data) {
// data is an array of objects and must be transformed for autocomplete to use
var array = data.error ? [] : $.map(data.movies, function(m) {
return {
label: m.title + " (" + m.year + ")",
url: m.links.alternate,
synopsis: m.synopsis
};
});
response(array);
});
},
focus: function(event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
document.write(ui.synopsis);
},
select: function(event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
document.write(ui.synopsis);
}
});
});
</script>
答案 0 :(得分:1)
除了ui.synopsis
对象调用之外,您的示例应该可以使用。传入的jQueryUI ui
对象实际上并不直接引用结果数组项。相反,您必须使用ui.item
来访问原始结果项:
$("#autocomplete").autocomplete({
delay: 500,
minLength: 3,
source: processed,
focus: function (event, ui) {
event.preventDefault();
$('#search_results').text(ui.item.synopsis);
},
select: function (event, ui) {
event.preventDefault();
}
});
在上面的示例中,我完全删除了AJAX
调用,并使用了之前提供的硬编码响应。但是,数据操作/设置仍然遵循与上面相同的逻辑。
FIDDLE示例:http://jsfiddle.net/Sta5N/