Google Autocomplete "API"

↩Index

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.
`client` or `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?

← Previous Post Next Post →