Google Search Bar on website

Question

I have a search bar on my website that allows the user to type their search and it will go to the google search engine.

It works fine.

My question is how can I make it have the google auto recommendations come up. For example, If someone types "BAS..." into a regular search in Google.com... Basketball will come up along with other reccommendations. How can I add that to my little search bar on my site?

http://jsfiddle.net/EeRgp/

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

You can do this if you use the custom search service. https://support.google.com/customsearch/bin/answer.py?hl=en&answer=2631081&topic=2662726&ctx=topic — Stuart, Aug 13 '13 at 00:02
There was a similar earlier question http://stackoverflow.com/questions/6428502/google-search-autocomplete-api but the answers seem to be outdated now. — Stuart, Aug 13 '13 at 00:10

Derek 朕會功夫 · Accepted Answer · 2013-08-13T01:14:41.027

5

Google "provides" an auto-complete JSONP API:

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

data is the auto complete data. http://jsfiddle.net/DerekL/MWvjx/

A complete working demo: http://jsfiddle.net/DerekL/8FTCG/

enter image description here

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

This API returns info further than just text. It also contains the type of every item, title (if it is a link), and relevance index.

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

edited Aug 13 '13 at 01:14

answered Aug 13 '13 at 00:17

Derek 朕會功夫

92,235
44
185
247

Derek your updated JS Fiddle works great. How can we take off the extra part of the sugguestions.. like if you type in G it says Google (query) – Akash Aug 13 '13 at 01:46
1

@user2626744 - What do you mean "extra part"? Do you mean something like this: http://jsfiddle.net/DerekL/eHwwv/ – Derek 朕會功夫 Aug 13 '13 at 02:09

score 0 · Answer 2 · edited Aug 13 '13 at 00:10

0

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 is preventing you form using it's engine in this way. Fortuanly they provide a clean alternative: Custom Search Engine

edited Aug 13 '13 at 00:10

Derek 朕會功夫

92,235
44
185
247

answered Aug 13 '13 at 00:05

Jason Sperske

29,816
8
73
124

Google Search Bar on website

2 Answers2