此代码应该采用 ISBN 或书名,并针对 googles book API 运行它,返回有效结果。该代码似乎可以自行运行,但是当我们将其放入 Dreamfactory 服务器时,它返回它无法设置未定义的属性“_renderItem”。
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
$(function() {
$("#txtBookSearch").autocomplete({
source: function(request, response) {
var booksUrl = "https://www.googleapis.com/books/v1/volumes?printType=books&maxResults=20&q=" + encodeURIComponent(request.term);
$.ajax({
url: booksUrl,
dataType: "jsonp",
success: function(data) {
response($.map(data.items, function(item) {
if (item.volumeInfo.authors && item.volumeInfo.title && item.volumeInfo.industryIdentifiers && item.volumeInfo.publishedDate) {
return {
// label value will be shown in the suggestions
ebook: (item.saleInfo.isEbook == null ? "" : item.saleInfo.isEbook),
title: item.volumeInfo.title,
id: item.id,
author: item.volumeInfo.authors[0],
authors: item.volumeInfo.authors,
isbn: item.volumeInfo.industryIdentifiers,
publishedDate: item.volumeInfo.publishedDate,
image: (item.volumeInfo.imageLinks == null ? "" : item.volumeInfo.imageLinks.thumbnail),
small_image: (item.volumeInfo.imageLinks == null ? "" : item.volumeInfo.imageLinks.smallThumbnail)
};
}
}));
}
});
},
select: function(event, ui) {
location.assign("results.html?id=" + ui.item.id);
},
delay: 600,
minLength: 2,
focus: function(event, ui) {
event.preventDefault();
}
});
$("#txtBookSearch").data("ui-autocomplete")._renderItem = function(ul, item) {
var img = $('<image class="imageClass" src=' + item.small_image + ' alt= n/a' + '/>');
var link = $('<a>' + item.title + ', ' + item.author + ', ' + item.publishedDate + (item.ebook == "" ? "" : ', (Ebook version)') + '</a>');
return $('<li>')
.append("<div>" + img.prop("outerHTML") + link.prop("outerHTML") + "</div>")
.appendTo(ul);
};
});