如何表示和自动完成基于Google Books API的建议的JSON？ [英] How to represent and autocomplete JSON of suggestions based on Google Books API?
本文介绍了如何表示和自动完成基于Google Books API的建议的JSON？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
此问题基于使用Google图书的建议结果API是无关紧要的。
一般来说，我正在建立用户将书添加到他的收藏中的可能性。
为此，用户使用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（）; $（＃指标）。show（）; if（xhr！= null）xhr.abort（）; xhr = $ .ajax（{url：requestUrl + queryTerm，dataType：jsonp，success：function（response）{$（ （）;}（））; $（document）.ready（function（） {$（＃indicator）。hide（）;}）; var typewatch =（function（）{var timer = 0;返回函数（callback，ms）{clearTimeout（timer）; timer = setTimeout（callback，ms）; };（）;
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div> < input type = text id =queryplaceholder =Start typing .../>< span id =indicator>< / span> < div style =width：600px; height：700px; padding-bottom：100px; position：relative; background：＃6c94b8; ID = 输出 >< / DIV> < label for =querystyle =position：relative; margin-left：100px; margin-top：100px;>标记：< / label>< / div>
解决方案
$ b https://www.librarieshacked.org/tutorials/autocompletewithapi
$（document）.ready（function（）{//只有页面加载
$（＃txtBookSearch）才会开始。 （{//将自动完成功能附加到文本框
//定义数据源
source：function（request，response）{
// url链接到Google书籍，包括输入的文本由用户（request.term）
var booksUrl =https://www.googleapis.com/books/v1/volumes?printType=books&q=+ encodeURIComponent（request.term）;
$ .ajax（{
url：booksUrl，
dataType：js onp，
成功：函数（数据）{
响应（$。map（data.items，function（item）{
if（item.volumeInfo.authors&& item.volumeInfo.title&& item.volumeInfo.industryIdentifiers&& item.volumeInfo.publishedDate）
{
return {
//标签值将显示在建议中
label：item.volumeInfo.title +'，'+ item.volumeInfo .authors [0] +'，'+ item.volumeInfo.publishedDate，
//值是一旦选中某个项目后放到文本框中的值
value：item.volumeInfo.title，
//以后使用的其他单个值
title：item.volumeInfo.title，
author：item.volumeInfo.authors [0]，
isbn：item.volumeInfo.industryIdentifiers，
publicationDate：item.volumeInfo.publishedDate，
image：（item.volumeInfo.imageLinks == null？：item.volumeInfo.imageLinks。缩略图），
描述：item.volumeInfo.description，
};
}
}））;
}
}）;
}，
select：function（event，ui）{
//选择某个项目时应该怎么做
//首先清除可能已经在描述中的任何内容
$（'＃divDescription'）。empty（）;
//我们使用ui.item获取当前选择的项目
//如果我们有一个
，则显示图片if（item.image！=''）
{
$（'＃divDescription'）。append（'< img src ='+ ui.item.image +'style =float：left; padding：10px;>'）;
}
//标题，作者和年份
$（'＃divDescription'）。append（'< p> b< b>标题：< / b> ui.item.title +'< / p>'）;
$（'＃divDescription'）。append（'< p>< b> Author：< / b>'+ ui.item.author +'< / p>'）;
$（'＃divDescription'）。append（'< p>< b>第一个发布年份：< / b>'+ ui.item.publishedDate +'< / p>'）;
//以及本书的常用描述
$（'＃divDescription'）。append（'< p>< b>说明：< / b>'+ ui.item.description +'< / p>'）;
//并显示到oclc的链接（如果我们有一个isbn编号）
if（ui.item.isbn& ui.item.isbn [0] .identifier）
{
$（'＃divDescription'）。append（'< P> b< b> ISBN：< / b>'+ ui.item.isbn [0] .identifier +'< / p> ）;
$（'＃divDescription'）。append（'< a href =http://www.worldcat.org/isbn/'+ ui.item.isbn [0] .identifier +'target = _blank>查看worldcat上的项目< / a>'）;
}
}，
minLength：2 //设置用户输入文本的最小长度
}）;
}）;
This question is based on Results of recommendations using Google Books API are irrelevant .
In general I am building possibility for user to add the book to his collection. For this purpose user searches through books using information from Google Books. But without suggestions based on what user types in the search field, it would be extremely uncomfortable.
At this point now we get jSON text of book suggestions, but I do not really understand how to represent this? So how to create a normal list of that JSON and create possibility for user to choose one of those recommendations,so that each of them will be autocompleted in the search field on click?
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);
};
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type=text id="query" placeholder="Start typing..." /><span id="indicator"></span>
<div style="width:600px;height:700px;padding-bottom:100px;position:relative;background:#6c94b8;" id="output"></div>
<label for="query" style="position:relative;margin-left:100px;margin-top:100px;">Tags: </label>
</div>
解决方案
I think this is what you are after: 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('<img src="' + ui.item.image + '" style="float: left; padding: 10px;">');
}
// and title, author, and year
$('#divDescription').append('<p><b>Title:</b> ' + ui.item.title + '</p>');
$('#divDescription').append('<p><b>Author:</b> ' + ui.item.author + '</p>');
$('#divDescription').append('<p><b>First published year:</b> ' + ui.item.publishedDate + '</p>');
// and the usual description of the book
$('#divDescription').append('<p><b>Description:</b> ' + ui.item.description + '</p>');
// and show the link to oclc (if we have an isbn number)
if (ui.item.isbn && ui.item.isbn[0].identifier)
{
$('#divDescription').append('<P><b>ISBN:</b> ' + ui.item.isbn[0].identifier + '</p>');
$('#divDescription').append('<a href="http://www.worldcat.org/isbn/' + ui.item.isbn[0].identifier + '" target="_blank">View item on worldcat</a>');
}
},
minLength: 2 // set minimum length of text the user must enter
});
});
这篇关于如何表示和自动完成基于Google Books API的建议的JSON？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
