如何根据Google Books API表示和自动填充建议的JSON？

此问题基于使用Google Books API的建议结果无关紧要 。

一般来说，我正在建立用户将书籍添加到他的collections中的可能性。 为此，用户使用Google图书中的信息搜索图书。 但是如果没有基于搜索字段中用户类型的建议，那将非常不舒服。

此时我们现在收到书籍建议的jSON文本，但我真的不明白如何表示这一点？ 那么如何创建该JSON的正常列表并为用户创建其中一个推荐的可能性，以便在点击时在搜索字段中自动完成每个推荐？

var requestUrl = "https://suggestqueries.google.com/complete/search?client=chrome&ds=bo&q="; var xhr; $(document).on("input", "#query", function () { typewatch(function () { var queryTerm = $("#query").val(); $("#indicator").show(); if (xhr != null) xhr.abort(); xhr = $.ajax({ url: requestUrl + queryTerm, dataType: "jsonp", success: function (response) { $("#indicator").hide(); $("#output").html(response); } }); }, 500); }); $(document).ready(function () { $("#indicator").hide(); }); var typewatch = (function () { var timer = 0; return function (callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); 

  
  
 Tags:   

Answer 1

我认为这就是你所追求的： https ： //www.librarieshacked.org/tutorials/autocompletewithapi

 $(document).ready(function () { // only begin once page has loaded $("#txtBookSearch").autocomplete({ // attach auto-complete functionality to textbox // define source of the data source: function (request, response) { // url link to google books, including text entered by user (request.term) var booksUrl = "https://www.googleapis.com/books/v1/volumes?printType=books&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 label: item.volumeInfo.title + ', ' + item.volumeInfo.authors[0] + ', ' + item.volumeInfo.publishedDate, // value is what gets put in the textbox once an item selected value: item.volumeInfo.title, // other individual values to use later title: item.volumeInfo.title, author: item.volumeInfo.authors[0], isbn: item.volumeInfo.industryIdentifiers, publishedDate: item.volumeInfo.publishedDate, image: (item.volumeInfo.imageLinks == null ? "" : item.volumeInfo.imageLinks.thumbnail), description: item.volumeInfo.description, }; } })); } }); }, select: function (event, ui) { // what to do when an item is selected // first clear anything that may already be in the description $('#divDescription').empty(); // we get the currently selected item using ui.item // show a pic if we have one if (item.image != '') { $('#divDescription').append(''); } // and title, author, and year $('#divDescription').append('
Title: ' + ui.item.title + '
'); $('#divDescription').append('
Author: ' + ui.item.author + '
'); $('#divDescription').append('
First published year: ' + ui.item.publishedDate + '
'); // and the usual description of the book $('#divDescription').append('
Description: ' + ui.item.description + '
'); // and show the link to oclc (if we have an isbn number) if (ui.item.isbn && ui.item.isbn[0].identifier) { $('#divDescription').append('
ISBN: ' + ui.item.isbn[0].identifier + '
'); $('#divDescription').append('View item on worldcat'); } }, minLength: 2 // set minimum length of text the user must enter }); });