How do I add the stock Google search to my own website with auto-complete?

Question

I am not asking about Site Search. I am wondering how to include a Google search box that searches the whole internet (not limited to a single site like Site Search would be) that also uses the same autocomplete behavior you see on Google.com.

Some of you may remember iGoogle, which was Google's web portal which I used and loved for years until they shut it down last year. I'm making my own iGoogle replacement. I can easily enough add a textbox up top to do the search, but what I'm having trouble reproducing is the JavaScript autocomplete behavior that you get with regular Google.com.

So starting with this:

<form action="https://www.google.com/search" method="get">
<input type="text" name="q" value="" />
</form>

How do I get it to do auto-complete?

I remember iGoogle. I wasn't a big fan of it, though I did like Google Reader. Good idea though, but you are taking on a rather big task! :P — tomysshadow, May 26 '14 at 23:22

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

You will need to use some server side scripting and try to implement a solution based on suggested queries API. More can be found on this question

On the client side try make an AJAx call as the user types to the textfield. As for the autocomplete functionality, I have used jQuery UI's plugin and it seems to work pretty great.

edited May 23 '17 at 12:20

Community

1
1

answered May 26 '14 at 20:14

vorillaz

6,098
2
30
46

score 0 · Answer 2 · answered May 26 '14 at 23:32

0

Did you try this? https://support.google.com/customsearch/answer/2631081

On the Custom Search home page ( https://www.google.com/cse/all ), click the search engine you want.
Click Search features, and then click the Autocomplete tab.
Switch Enable autocomplete to ON.

answered May 26 '14 at 23:32

tomysshadow

870
1
8
23

That's site search, which I stated in the question is not what I'm looking for. – soapergem May 27 '14 at 03:32

score 0 · Answer 3 · answered Jun 02 '14 at 21:54

I'm going to accept Theodore's answer as correct simply because he led me on the right path; though to be honest, he really didn't give me much and I really came up with the solution on my own here.

I discovered that if you query this URL:

https://www.google.com/s?tch=1&sclient=psy-ab&q=search+term+goes+here&cp=21

Where q is your search term and cp is the position of the cursor as you're typing, that will return a JSON response which can be parsed and converted into something usable, then integrated with jQuery UI. (Basically I just wrote a short little PHP script on my own server which opens that URL using file_get_contents.) No guarantee on how long that will work though, as it seems very unofficial.

I also ended up using the jQuery UI Autocomplete HTML extension by Scott González, because the data Google passes back has <b> tags in it already, so that worked quite well.

How do I add the stock Google search to my own website **with auto-complete**?

3 Answers3

How do I add the stock Google search to my own website with auto-complete?