I am trying to use jQuery UI Autoplete feature in order to make a wrapper of Google Autoplete Service(because I just want to restrict some of the results returned by Google in a manner that is not possible through Google API).

Suppose I have this code:

$("#address").autoplete({
  source: function(request, response){
    autoCompleteService = new google.maps.places.AutopleteService();
    autoCompleteService.getQueryPredictions({input: request.term }, autopleteCallback);
    //I should somewhere call the "response" object with desired suggestions as arguments
  },
  minLength: 5,
});

The problem is that jQuery UI Autoplete forces me to call the "response" object(which is actually a function) with the suggestions I would like to show to the user as parameters.

But, on the other hand, Google API forces me to define a callback function(in my case 'autopleteCallback') to whom it gives the requested suggestions as parameters after it's done.

Of course, I can't call the 'response' object inside the 'autopleteCallback' function, and I can't call the response object just after this line either:

autoCompleteService.getQueryPredictions({input: request.term }, autopleteCallback);

Because JS is async and I couldn't be sure that I get something in let's say: a global variable that I use in order to pass the results.

What would be the solution for that? Is there a well-known JS design pattern for a problem like this?

I am trying to use jQuery UI Autoplete feature in order to make a wrapper of Google Autoplete Service(because I just want to restrict some of the results returned by Google in a manner that is not possible through Google API).

Suppose I have this code:

$("#address").autoplete({
  source: function(request, response){
    autoCompleteService = new google.maps.places.AutopleteService();
    autoCompleteService.getQueryPredictions({input: request.term }, autopleteCallback);
    //I should somewhere call the "response" object with desired suggestions as arguments
  },
  minLength: 5,
});

The problem is that jQuery UI Autoplete forces me to call the "response" object(which is actually a function) with the suggestions I would like to show to the user as parameters.

But, on the other hand, Google API forces me to define a callback function(in my case 'autopleteCallback') to whom it gives the requested suggestions as parameters after it's done.

Of course, I can't call the 'response' object inside the 'autopleteCallback' function, and I can't call the response object just after this line either:

autoCompleteService.getQueryPredictions({input: request.term }, autopleteCallback);

Because JS is async and I couldn't be sure that I get something in let's say: a global variable that I use in order to pass the results.

What would be the solution for that? Is there a well-known JS design pattern for a problem like this?

• javascript
• jquery-ui
• autoplete
• google-places-api

Share Improve this question Follow asked Nov 10, 2012 at 16:14 TerenteTerente 9122 silver badges55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You, sir, are a genius to bine the two frameworks! So I'll share the solution that I have:

$("#search").autoplete({
    source: function (request, response) {
        autoCompleteService.getQueryPredictions({ input: request.term }, function (predictions, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            response($.map(predictions, function (prediction, i) {
                return {
                    label: prediction.description,
                    value: prediction.description
                }
            }));
        });
    },
    select: function (event, ui) {
        var value = ui.item.value;
        searchMap(value);
    }
});

Of course, I have an actual function that does the proper Place lookup (searchMap()) that takes in a term. The only realistic way to do this in order to have a proper autopleteCallback AND response handler for jQuery UI autoplete is to keep the callback implementation inline. It sucks if you want to do this in more than one place but I haven't thought of anything better. Yet...