У меня есть jquery меню автозаполнения, которое работает. Он отображает список книг с автором, названием и изображением книги. Я хотел бы добавить функцию щелчка по изображению книги и размещения названия книги в express app.post для отображения страницы профиля книги.
Вот код jquery автозаполнения. Я добавил событие выбора, которое не работает.
<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) {
var transformed = data.items.map(function (book) {
return {
title: book.volumeInfo.title,
author: book.volumeInfo.author,
image: book.volumeInfo.imageLinks.thumbnail
};
});
response(transformed);
}
});
},
select: function(event, ui){
console.log(ui.title);
var id = ui.item.title;
$.ajax({
url: "/book_profile_b/" + id,
type: "POST",
dataType: 'html',
data: { id: id },
success: function(data){
alert(data);
var win = window.open();
win.document.write(data);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr.responseText+" - "+thrownError)
alert("ERROR:" + xhr.responseText+" - "+thrownError);
}
});
},
}).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);
};
});
На стороне express. Это функция, в которую я пытаюсь отправить данные о названии книги.
app.post('/book_profile_b/:encoded_id', function(req, response,err){
var book_title = req.params.encoded_id;
if(err){
console.log(err);
}
request("https://www.googleapis.com/books/v1/volumes?q=" + book_title,
function (error, resp, data) {
if (error) {
console.log(error);
}
else {
var gb_data = JSON.parse(data);
console.log(gb_data);
const gb_description = gb_data.items[0].volumeInfo.description;
const gb_image = gb_data.items[0].volumeInfo.imageLinks.thumbnail;
response.render('book_profile', {book_description: gb_description, book_image: gb_image});
}
});
});