ngAutoComplete with Google Suggest api

Question

AngularJS has ngAutoComplete that works with Google place perfectly.

How can I make it work with Google Suggest API (the suggested keywords when typing in Google Search input box)? Is there something out of the box?

If not, what is the best way to implement it? (if I need my own API interface - how should I make the connection)?

EDITED

Google Suggest API will return XML for the following call. If I want to return JSON it needs to be passed via my server side to translate it. It could also be an option if you suggest so

http://google.com/complete/search?output=toolbar&q=theory&gl=in

Answer 1

Updated Version (Custom Directive ngGoogleSuggest)

click Plunker

Directive performs much better because on keyup performs a http call to GoogleSuggest API

    elem.bind('keyup', scope.search);

Markup:

  <div data-ng-google-suggest ng-model="Search"></div>

Note: I plan to make a GitHub repo for ngGoogleSuggest after it has been tested a bit more

---

Screen Shots

Calling Google Search API

• End Point: 'http://suggestqueries.google.com/complete/search
• for JSON response (not XML), add param &client=firefox
• Uri Encoded search Parameter
• use JSONP protocol by adding ?callback=JSON_CALLBACK to avoid Access-Control-Allow-Origin Error

example $http call

    scope.search = function() {
      // If searchText empty, don't search
      if (scope.searchText == null || scope.searchText.length < 1)
        return;

      var url = 'http://suggestqueries.google.com/complete/search?';
      url += 'callback=JSON_CALLBACK&client=firefox&hl=en&q=' 
      url += encodeURIComponent(scope.searchText);
      $http.defaults.useXDomain = true;

      $http({
        url: url,
        method: 'JSONP',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
          'Content-Type': 'application/json',
          'Accept': 'application/json'

        }
      }).
      success(function(data, status, headers, config) {

        // Api returns [ Original Keyword, Searches[] ]
        var results = data[1];
        if (results.indexOf(scope.searchText) === -1) {
          data.unshift(scope.searchText);
        }
        scope.suggestions = results;
        scope.selectedIndex = -1;
      }).
      error(function(data, status, headers, config) {
        console.log('fail');
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });