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

;q=theory&gl=in

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./plete/search?output=toolbar&q=theory&gl=in

• javascript
• angularjs
• autoplete
• google-api
• google-suggest

Share Improve this question Follow edited May 13, 2015 at 21:33 Dave Alperovich 32.5k88 gold badges8282 silver badges101101 bronze badges asked May 10, 2015 at 10:31 DejellDejell 14.4k4242 gold badges157157 silver badges232232 bronze badges 3

• please provide any google suggest api example work in json. – allenhwkim Commented May 13, 2015 at 3:23
• you need to provide your url that provide .json format of google suggest api. With .xml format, I don't think anyone will look at it. – allenhwkim Commented May 13, 2015 at 15:52
• can you please post an answer how to do it in that case? take my url as a demo string – Dejell Commented May 13, 2015 at 16:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can add this to the remote-url -

https://www.google./s?sclient=psy-ab&biw=1242&bih=395&q=ThisIsTheSearchString&oq=&gs_l=&pbx=1&bav=on.2,or.r_cp.&bvm=bv.93112503,d.cWc&fp=160df26a97fa030e&pf=p&sugexp=msedr&gs_rn=64&gs_ri=psy-ab&tok=_1hxlqgFnvRgVdHXR4t-nQ&cp=10&gs_id=51&xhr=t&es_nrs=true&tch=1&ech=37&psi=O5FTVZiMAfPisASwnYH4Cg.1431540027601.1

Make ThisIsTheSearchString a var that changes on key stroke. Before you put the url into the ngAutoComplete make sure to encode the string - escape(ThisIsTheSearchString); This will help if there are any white spaces in the search.

I got the URL by going to google and watching the network tab. It will return a .txt file that you will have to read. Also you will need a regex to pile the file.

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./plete/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./plete/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.
      });