Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Custom Search API Autocomplete?

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.

like image 443
Kram Avatar asked Nov 22 '11 19:11

Kram


People also ask

How do I Autocomplete a Google Search?

How do I use Google autocomplete? To use Google autocomplete, begin typing a keyword into the google search bar. Google will automatically pop up a list of suggestions for things people searched for when they enter the term you are using.

Is Google Autocomplete personalized?

If you're signed in to your Google Account and have Personal results turned on, you might also get personalized predictions and recommendations in Google Search. If you don't want to get these predictions and recommendations, turn off Personal results.

What is Google Autocomplete API?

If you're building a client-side application, take a look at the Places SDK for Android, the Places SDK for iOS, and the Places Library, Maps JavaScript API. The Place Autocomplete service is a web service that returns place predictions in response to an HTTP request.


2 Answers

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');
      }
    });
});
like image 59
Kram Avatar answered Oct 21 '22 15:10

Kram


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.
like image 37
Jeremy Burton Avatar answered Oct 21 '22 15:10

Jeremy Burton