javascript - 谷歌从 api url 调用 json 预订 jquery 自动完成功能不起作用
问题描述
我有一个搜索框 findBook,我正在尝试使用 jquery 自动完成和 json api 调用 google-books api 来显示书名、作者和缩略图。
当我在搜索框中输入时,没有任何反应。任何帮助,将不胜感激。自动完成的来源是 google-boosk api url。谢谢 :)
<!DOCTYPE html>
<html>
<head>
<!-- Your web-app is https, so your scripts need to be too -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="/style.css" type="text/css">
<link rel="stylesheet" href="/home.css" type="text/css">
<script src='https://code.jquery.com/jquery-2.2.4.js'
integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
crossorigin="anonymous"></script>
<script src='https://code.jquery.com/ui/1.12.0/jquery-ui.js'></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet" media="screen" />
<script type='text/javascript'>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#findBook").autocomplete({
source: function (request, response) {
$.ajax({
method:"GET",
dataType: "json",
url: "https://www.googleapis.com/books/v1/volumes?q=" + request.term,
success: function (data) {
console.log(data);
var transformed = $.map(data.items.volumeInfo, function (book) {
return {
title: book.title,
author: book.author,
image: book.imageLinks.thumbnail
};
});
response(transformed);
},
error: function () {
response([]);
}
});
}
});
});
</script>
</head>
<body>
<div class="searchBook">
<input type="text" placeholder="Search.." id="findBook" />
</div>
</body>
</html>
解决方案
$.map()
jQuery 函数需要一个数组来迭代。在你的情况下:data.items.volumeInfo
是undefined
.
但是,您可以通过这种方式使用Array#map
JavaScript 函数来迭代data.items
:
var transformed = data.items.map(function(book) {
return {
title: book.volumeInfo.title,
author: book.volumeInfo.authors,
image: book.volumeInfo.imageLinks.thumbnail
};
});
在上面的代码中,book 对象有一个volumeInfo
属性,所以你可以访问它的属性来构建一个新对象,在这种情况下是transformed
变量。
现在,要显示书名、作者和缩略图,您必须使用该_renderItem
功能修改 jQuery 自动完成插件呈现的 HTML。
像这样的功能:
.autocomplete("instance")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + "<img src=\"" + item.image + "\" style=\"height: 40%;\" /><br />" + (item.author && item.author.length ? item.author.map(function(x) {
return x;
}).join(" | ") : '') + " - " + item.title + "</a>")
.appendTo(ul);
};
得到这个结果:
请参阅此示例:
$(function() {
$("#findBook").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=" + request.term,
dataType: "json",
data: {
term: request.term
},
success: function(data) {
var transformed = data.items.map(function(book) {
return {
title: book.volumeInfo.title,
author: book.volumeInfo.authors,
image: book.volumeInfo.imageLinks.thumbnail
};
});
response(transformed);
}
});
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + "<img src=\"" + item.image + "\" style=\"height: 40%;\" /><br />" + (item.author && item.author.length ? item.author.map(function(x) {
return x;
}).join(" | ") : '') + " - " + item.title + "</a>")
.appendTo(ul);
};
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="searchBook">
<input type="text" placeholder="Search..." id="findBook">
</div>
</body>
</html>
请记住避免混合使用不同版本的 jQuery 库。
更新:仅显示图像。
如果选项有要显示的文本,则默认呈现选项。但是,我们可以添加一个隐藏span
的文本,它只会显示图像。
类似于此示例中的内容:
$(function() {
$("#findBook").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://www.googleapis.com/books/v1/volumes?q=" + request.term,
dataType: "json",
data: {
term: request.term
},
success: function(data) {
var transformed = data.items.map(function(book) {
return {
title: book.volumeInfo.title,
author: book.volumeInfo.authors,
image: book.volumeInfo.imageLinks.thumbnail
};
});
response(transformed);
}
});
}
}).autocomplete("instance")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<img src=\"" + item.image + "\" style=\"height: 40%;\" /><span hidden>" + item.image + "</span>")
.appendTo(ul);
};
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="searchBook">
<input type="text" placeholder="Search..." id="findBook">
</div>
</body>
</html>
希望这可以帮助!
推荐阅读
- c++ - Doxygen C++ - 如何将所有宏扩展放入一个组中
- python - matplotlib 子图中的多色线图
- wso2 - WSO2:无法使用 scope=apim:subscribe 生成 access_token
- python-3.x - 如何在 django 中读取第三方应用程序引发的异常的内容?
- php - 控制器方法不更新数据
- python - 我需要帮助来创建一个新的 TKinter 窗口而不是扩展当前窗口
- c# - 使用 yamldotnet 从 YAML 反序列化任意对象的安全隐患
- node.js - 通过 nodejs 上的 ssh 连接到 postgres
- linux - 响应脚本中的 sudo 密码请求?
- node.js - 使用本地、纱线工作区依赖项和生产环境(例如 App Engine)环境变量构建?