Google search bar on website

Question

I have a search bar on my website that allows the user to enter their search, and he will go to the Google search engine.

It works great.

My question is how can I get him to create Google auto recommendations. For example, if someone enters "BAS ..." into a regular search on Google.com ... Basketball will appear along with other recommendations. How can I add this to my little search bar on my site?

http://jsfiddle.net/EeRgp/

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

Answer 1

Google "exposes" the JSONP auto-complete API:

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

data is automatic complete data. http://jsfiddle.net/DerekL/MWvjx/

Full working demo: http://jsfiddle.net/DerekL/8FTCG/

---

It looks like you can even use it as a mini calculator. :)

---

This API returns information, not just text. It also contains the type of each element, a title (if it is a link) and a relevance index.

---

PS: Sorry if you are not familiar with jQuery . But when it comes to XHR and AJAX, jQuery is like substantial. It's like a lifeguard!

Answer 2

If you load the JavaScript console in your browser, you will see this error:

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

In short, Google does not allow you to use this engine in this way. Fortuanly they provide a clean alternative: Custom Search Engine