Google Custom Search API Autocomplete? - autocomplete

Question

We're using the google custom search API (paid-for server-side API) to power our search results.
I'd like to add an autocomplete feature to the search - however, does anyone know if there is support for this (either via the server-side API, or via some sort of client-side JSONP?)
I have tried using the autocomplete for the Google Customised search, but this appears to want to draw the search box and display google ads with the results, which I don't want.

Answer 1

Got this working something like this - hope this helps someone else :)
$(function () {
$('input.search')
.focus(function () { this.select(); })
.mouseup(function (e) { e.preventDefault(); })
.autocomplete({
position: {
my: "left top",
at: "left bottom",
offset: "0, 5",
collision: "none"
},
source: function (request, response) {
$.ajax({
url: "http://clients1.google.com/complete/search?q=" + request.term + "&hl=en&client=partner&source=gcsc&partnerid={GOOGLESEARCHID}&ds=cse&nocache=" + Math.random().toString(),
dataType: "jsonp",
success: function (data) {
response($.map(data[1], function (item) {
return {
label: item[0],
value: item[0]
};
}));
}
});
},
autoFill: true,
minChars: 0,
select: function (event, ui) {
$(this).closest('input').val(ui.item.value);
$(this).closest('form').trigger('submit');
}
});
});

Answer 2

At the time of writing (June 2013), there is a somewhat easier way of getting autocompletion while still getting the results as XML:
Use the Google Custom Search Element Control (https://developers.google.com/custom-search/docs/element).
Just use the Search bar control, which you can style as you like.
<gcse:searchbox-only enableAutoComplete="true"
resultsUrl="#"></gcse:searchbox-only>
The "trick" is that you can specify "resultsUrl" which means you can direct the actual search results to a page you generate via the XML API, without having to implement the search box UX yourself.