Google Custom Search API 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.

Himeji

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');
      }
    });
});

Himeji

Thanks for this code, I'm having one problem with it that I don't understand. I am seeing the network request go out correctly and I'm seeing a 200 response from it, with the expected response data, but for some reason that success function is never being hit. Any ideas? – Entrant

Awesome, worked for me. Paul, if you're not seeing any suggestions, it may be that Google simply doesn't have any for you. I was really taken aback by how few suggestions my custom site search had to offer; I ended up adding a huge amount manually in the CSE control panel. – Hefty

Great, thanks for this it works for me too. My only problem is the .ui-helper-hidden-accessible span that now appears just before the closing body tag. Is this something that can be turned off, rather thatn using css to hide it? – Antenna

Can anyone confirm that the source URL in the answer above is still valid and that this method of implementing google custom search autocomplete via the json api is indeed still possible? Would anyone be willing to share a link of this being implemented successfully? – Importune

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.

Sulfurous