CODEWITHSUNDEEP
javascripthtmlforms
Akash
Akash

Reputation: 53

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

Upvotes: 4

Views: 1015

Answers (2)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

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!

Upvotes: 5

Jason Sperske
Jason Sperske

Reputation: 30416

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

Upvotes: 0

Related Questions