Akash Akash - 2 months ago 15
HTML Question

Google Search Bar on website

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">



Answer

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!