Google Autocomplete "API"

https://shreyaschand.com/blog/2013/01/03/google-autocomplete-api/

Google Autocomplete "API"

Posted on 03 January 2013

Recently, I’ve been working on a personal side project that makes use of the YouTube API. As part of the project, I needed to implement a search bar, complete with autocomplete suggestions. Basically, I wanted to mimic the functionality of the YouTube search bar.

However, it turns out that there is no documented method to get that list of autocomplete suggestions. Fortunately, I discovered, with the help of some google-fu, that it is possible to  tap into that autocomplete stream by hitting this base URL:

http://suggestqueries.google.com/complete/search

Through some trial and error, I was able to construct a table of the necessary/available GET request parameters.

PARAMETER	DESCRIPTION	OPTIONS
q	Specifies the search to complete. (Required. Duh.)	Your search term.
clientor output	Determines the type of response you want. (Required. You must specify either one of the two. If both are provided, client takes precedence)	For JSON, use firefox. For XML, use toolbar. For JSONP (only supported with client), use youtube.
jsonp	Specifies the name of the JSONP callback function. (Optional. Defaults to window.google.ac.h.)	Your JSONP callback function's name.
ds	Include this option to restrict the search to a particular site. (Optional. Defaults to plain ol' google search.)	For YouTube (!), use yt.
hl	Chooses the language in which the search is being performed. (Optional. Defaults to English. (en))	Any google-supported language's 2-letter abbreviation (ISO 639-1).

Here are some examples with their outputs:

http://suggestqueries.google.com/complete/search?q=ob&client=toolbar

http://suggestqueries.google.com/complete/search?q=ob&client=firefox&hl=fr

Keep in mind that this “API” is a bit of a hack; it was only meant for use by Google’s own products. Thus, making a JSON or XML request to this service from your javscript code will result in the following error:

XMLHttpRequest cannot load "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&q=te&output=firefox".
Origin "http://yourdomain.com" is not allowed by Access-Control-Allow-Origin

This problem of cross domain restrictions, though annoying, is relatively common and making a JSONP based request, by specifying output = youtube, was the method I employed to solve this problem. In my final implementation, I utilized jQuery and the Autocomplete widget from jQuery UI. Here’s the code I wrote, where #search is an input element of type text.

var suggestCallBack; // global var for autocomplete jsonp

$(document).ready(function () {
    $("#search").autocomplete({
        source: function(request, response) {
            $.getJSON("http://suggestqueries.google.com/complete/search?callback=?",
                {
                  "hl":"en", // Language
                  "ds":"yt", // Restrict lookup to youtube
                  "jsonp":"suggestCallBack", // jsonp callback function name
                  "q":request.term, // query term
                  "client":"youtube" // force youtube style response, i.e. jsonp
                }
            );
            suggestCallBack = function (data) {
                var suggestions = [];
                $.each(data[1], function(key, val) {
                    suggestions.push({"value":val[0]});
                });
                suggestions.length = 5; // prune suggestions list to only 5 items
                response(suggestions);
            };
        },
    });
});

And finally, here’s a screenshot of my finished YouTube search bar.

Let me know what you think: Know any better ways to do this? Know of any other GET parameters? Find somewhere that I goofed up?