Javascript Google books jquery从api url调用json自动完成不工作_Javascript_Jquery_Json_Jquery Ui Autocomplete_Google Books

Javascript Google books jquery从api url调用json自动完成不工作

javascript jquery json

Javascript Google books jquery从api url调用json自动完成不工作,javascript,jquery,json,jquery-ui-autocomplete,google-books,Javascript,Jquery,Json,Jquery Ui Autocomplete,Google Books,我有一个搜索框findBook，我正在尝试使用jquery autocomplete with json api调用GoogleBooks api来显示图书标题、作者和缩略图当我在搜索框中键入时，什么都没有发生。任何帮助都将不胜感激。自动完成的源代码是google boosk api url。谢谢：） $（文档）.ready（函数（）{ $（“#findBook”）.autocomplete({ 来源：功能（请求、响应）{ $.ajax({ 方法：“获取”，数据类型：“json”， url

我有一个搜索框findBook，我正在尝试使用jquery autocomplete with json api调用GoogleBooks api来显示图书标题、作者和缩略图

当我在搜索框中键入时，什么都没有发生。任何帮助都将不胜感激。自动完成的源代码是google boosk api url。谢谢：）


$（文档）.ready（函数（）{
$（“#findBook”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
方法：“获取”，
数据类型：“json”，
url:“https://www.googleapis.com/books/v1/volumes?q=“+request.term，
成功：功能（数据）{
控制台日志（数据）；
var transformed=$.map（data.items.volumeInfo，函数（book）{
返回{
书名：book.title，
作者：book.author，
图像：book.imageLinks.缩略图
};
});
反应（转化）；
},
错误：函数（）{
答复（[]）；
}
});
}
});
});

您正在加载两个不同的jQuery版本

jQuery-2.2.4

和

jQuery/3.3.1/jQuery.js

以及在

jQuery UI

之后加载的版本3。这就是问题所在

我只需删除

jquery-2x

并将

jquery3x

移动到

jqueryui

之前。事实上，如果您只是将

jquery-3x

移动到

jqueryui

之前，而不删除任何内容，那么这应该是可行的

<!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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></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">
    $(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>


$（文档）.ready（函数（）{
$（“#findBook”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
方法：“获取”，
数据类型：“json”，
url:“https://www.googleapis.com/books/v1/volumes?q=“+request.term，
成功：功能（数据）{
控制台日志（数据）；
var transformed=$.map（data.items.volumeInfo，函数（book）{
返回{
书名：book.title，
作者：book.author，
图像：book.imageLinks.缩略图
};
});
反应（转化）；
},
错误：函数（）{
答复（[]）；
}
});
}
});
});

jQuery函数需要一个数组进行迭代。在您的情况下：

data.items.volumeInfo

是

未定义的

但是，您可以使用JavaScript函数以如下方式迭代

数据项
var transformed = data.items.map(function(book) {
  return {
    title: book.volumeInfo.title,
    author: book.volumeInfo.authors,
    image: book.volumeInfo.imageLinks.thumbnail
  };
});

在上面的代码中，book对象有一个volumeInfo
属性，因此您可以访问它的属性来构建一个新的对象，在本例中是转换的变量
现在，要显示书名、作者和缩略图，您必须使用\u renderItem
函数修改jQuery autocomplete插件的呈现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);
};

.autocomplete（“实例”）。\u renderItem=函数（ul，项目）{
返回$（“”）
.data（“item.autocomplete”，item）
.append（“
请参见本例中的：

$（函数（）{
$（“#findBook”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“https://www.googleapis.com/books/v1/volumes?q=“+request.term，
数据类型：“json”，
数据：{
期限：request.term
},
成功：功能（数据）{
var transformed=data.items.map（函数（book）{
返回{
标题：book.volumeInfo.title，
作者：book.volumeInfo.authors，
图像：book.volumeInfo.imageLinks.缩略图
};
});
反应（转化）；
}
});
}
}).autocomplete（“实例”）。\u renderItem=函数（ul，项）{
返回$（“”）
.data（“item.autocomplete”，item）
.append（“+”
“+（item.author&&item.author.length？item.author.map）（函数（x）{
返回x；
}).join（“|”）：“+”-“+item.title+”）
.附录（ul）；
};
})；

jQuery UI自动完成-远程JSONP数据源
感谢您的快速回复。因此，jquery和jquery ui的所有版本都应该是2.2.4或1.12.1？您的回复都是2.2.4或1.12.1。我会更新我的答案，以尝试改进解释。关于jquery ui支持jquery版本>=1.7.0谢谢您的帮助。如果我只想显示书籍图像，而不显示图片，我该如何修改代码title？.autocomplete（“实例”）。\u renderItem=function（ul，item）{return$（“”）。data（“item.autocomplete”，item）。append（“+”）。appendTo（ul）；}；嘿，丹尼，我有一个关于autocomplete菜单的新问题。你能看一下吗？
.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);
};