我正在尝试使用Google Books API构建图书标题推荐系统。不幸的是，与https://books.google.com相比，我得到的结果是非常不相关的。例如，这是我通过搜索单词"sher"(主要是期待夏洛克·福尔摩斯之类的东西)得到的列表。
`She Said Yes;The Oh She Glows Cookbook;What Can She Know?;She-Wolf;Murder She Wrote;My Mother She Killed Me, My Father He Ate Me;22 Things a Woman Must Know If She Loves a Man with Asperger's Syndrome;Where She Danced;The Israeli-Palestinian Peace Negotiations, 1999-2001`
如你所见，甚至没有最相关的标题。如果你在谷歌图书网站上输入"Sher"，你会得到绝对正确的相关推荐。我对Google API理解对了吗?我的代码有什么问题?
var request = 'https://www.googleapis.com/books/v1/volumes';
var outputbookslistshow = 0;
$('#myTextArea').on('keyup', function(){
if(outputbookslistshow == 0){
outputbookslistshow = 1;
$('#outputgbooksrec').show(300); // it's a div for outputting titles
}
$('#outputgbooksrec').empty();
var keywords = $(this).val();
if(keywords.length > 0 ){
$.getJSON(request + '?q=' + keywords, function(response){
for (var i = 0; i < response.items.length; i++) {
var item = response.items[i];
document.getElementById("outputgbooksrec").innerHTML += "<br>"
+ "<div class='itembook'>" + item.volumeInfo.title + "</div>";
}
})
}
});
0。TLDR h1> 是一个工作小提琴使用谷歌的https://suggestqueries.google.com/complete/search
参数:
output/client # "toolbar" => xml, "firefox" => json, "chrome" => jsonp
ds # which site to search in ("bo" for books, "yt" for youtube...)
q # search term: "sher"
查询:
https://suggestqueries.google.com/complete/search?output=firefox& ds = bo& q =谢尔
结果:
["sher",["sherlock holmes","sherrilyn kenyon","sherman alexie","sheryl sandberg","sherlock","sherlock holmes short stories","sherlock holmes book","sher o shayari","sherlock holmes novels","sher shah suri"]]
1。建议vs搜索结果
首先要意识到的是，当谷歌给出建议时，它们不是你按回车键时它会显示给你的结果。
搜索结果是相关的，如果相关的术语包含在您的查询。
建议假设您的查询是不完整的，因此将您的查询与其他查询进行比较，以猜测您的查询的完整版本可能是什么。
当我在http://books.google.com搜索"sher"时，我看到的结果是:
- 以色列-巴勒斯坦和平谈判，1999-2001年
- 超越中立:完美主义与政治 沙漠拒绝选择!:利用你所有的兴趣，激情，……
这样做的原因是作者:在前三个例子中，是"George Sher"，在第四个例子中是"Barbara Sher"。这是期望的行为，因为当我搜索"sher"时，我不希望"Sherlock"的结果掩盖了"George sher"。
<标题> 2。解决方案
Google也为它的建议提供了一种API。关于它的一些信息可以在这里找到。更重要的是，使用开发者工具，你可以准确地看到谷歌正在做什么。
使用开发人员工具:检查https://books.google.com页面(CTRL+SHIFT+i Chrome)。转到网络选项卡，等待直到所有内容加载完毕。
当您开始输入时，Google将向服务器发送请求，您将看到这些请求填充在列表中。当我输入"sher"时，Google发送了这个请求:
https://suggestqueries.google.com/complete/search?client=books&ds=bo&q=sher&callback=_callbacks_._1id33zyi5
查看变量:
client = books
ds = bo
q = sher
callback = _callbacks_._1id33zyi5
- 客户端决定你收到的结果类型(XML[工具栏]，JSON [firefox]， JSONP [chrome])
- ds将搜索限制在特定网站(books [bo]， youtube [yt]等)。
- q当然是查询文本
- callback是JSONP使用的参数(它与JSON有一些重要的区别)。不用太担心，因为jQuery可以为你处理这些。
我通过查看这个请求和阅读这个和这个来拼凑这些参数的信息。
CORS:因为你从一个不是google.com的域名发出请求，你将得到一个Access-Control-Allow-Origin错误。这是一种试图防止XSS的安全措施。要解决这个问题，您需要使用JSONP。
使用jQuery，我们不需要担心回调，所以让我们改变客户端参数为chrome，并使用最后的查询:
https://suggestqueries.google.com/complete/search?client=chrome& ds = bo& q =谢尔
在这个例子中，你可能想要注意
"google:suggestrelevance"键，这是使用JSONP的一个额外的好处(谷歌只返回JSONP数据中的信息)。
var requestUrl = "https://suggestqueries.google.com/complete/search?client=chrome&ds=bo&q=";
var xhr;
$(document).on("input", "#query", function () {
typewatch(function () {
// Here's the bit that matters
var queryTerm = $("#query").val();
$("#indicator").show();
if (xhr != null) xhr.abort();
xhr = $.ajax({
url: requestUrl + queryTerm,
dataType: "jsonp",
success: function (response) {
$("#indicator").hide();
$("#response").html(syntaxHighlight(response));
}
});
}, 500);
});
/*
* --------- YOU ONLY NEED WHAT IS ABOVE THIS LINE ---------
*/
$(document).ready(function () {
$("#indicator").hide();
});
// Just for fun, some syntax highlighting...
// Credit: http://stackoverflow.com/a/7220510/123415
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|b(true|false|null)b|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
// And automatic searching (when you stop typing)
// Credit: http://stackoverflow.com/a/2219966/123415
var typewatch = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();/*
* Safe to ignore:
* This is just to make stuff look vaguely decent
*/
body {
padding: 10px;
}
div * {
vertical-align: top;
}
#indicator {
display: inline-block;
background: no-repeat center/100% url('http://galafrica.actstudio.ro/img/busy_indicator.gif');
width: 17px;
height: 17px;
margin: 3px;
}
/*
*
* CREDIT:
* http://stackoverflow.com/a/7220510/123415
*/
pre {
outline: 1px solid #ccc;
padding: 5px;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: red;
}
.key {
color: #008;
}<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>
<pre id="response"></pre>