网站上的Google搜索栏

Question

我在我的网站上有一个搜索栏，用户可以在其中输入他们的搜索内容，然后就会转到谷歌搜索引擎。它工作得很好。

我的问题是，如何让它显示谷歌自动提示。例如，如果有人在Google.com的常规搜索中键入“BAS...”，则篮球将与其他推荐一起出现。我该如何将其添加到我网站上的搜索栏中？ http://jsfiddle.net/EeRgp/

<form method="get" action="https://www.google.com/search">

- Akash

---

https://developers.google.com/custom-search/v1/overview - Derek 朕會功夫

如果您使用自定义搜索服务，就可以实现这一点。https://support.google.com/customsearch/bin/answer.py?hl=en&answer=2631081&topic=2662726&ctx=topic - Stuart

之前有一个类似的问题：https://dev59.com/lmw15IYBdhLWcg3wv-NM，但是现在那些答案看起来已经过时了。 - Stuart

Answer 1

谷歌提供了一个自动完成的JSONP API：

$.ajax({
    url: "http://suggestqueries.google.com/complete/search",
    dataType: "jsonp",
    data: {
        client: "chrome",
        q: "Query"
    }
}).done(function(data){
    console.log(data);
});

data是自动完成数据。

http://jsfiddle.net/DerekL/MWvjx/

这是一个完整的工作演示：http://jsfiddle.net/DerekL/8FTCG/

---

看起来你甚至可以将其用作小型计算器。 :)

---

此API返回的信息不仅限于文本，还包括每个项目的类型、标题（如果是链接）和相关度指数。

---

PS：如果您不熟悉jQuery，那我很抱歉。但是当涉及到XHR和AJAX时，jQuery就像一种必需品。它就像救生员！

- Derek 朕會功夫

---

Derek，你更新的JS Fiddle非常好用。我们如何去掉建议中多余的部分，比如输入G时它会显示Google（查询）？ - Akash

@user2626744 - 你所说的“额外部分”是什么意思？你是指像这样的东西吗：http://jsfiddle.net/DerekL/eHwwv/ - Derek 朕會功夫

Answer 2

如果您在浏览器中加载JavaScript控制台，您将看到以下错误：

Load denied by X-Frame-Options: https://www.google.com/search?q=Google does not permit cross-origin framing.

简而言之，谷歌正在阻止您以这种方式使用其引擎。幸运的是，他们提供了一个干净的替代方案：自定义搜索引擎。

- Jason Sperske