通过jQuery UI的自动完成功能总结谷歌地方自动填充服务 [英] Wrap Google Places Autocomplete Service through jQuery UI Autocomplete feature

问题描述

我想使用jQuery UI的自动完成功能，以使谷歌自动完成服务的封装（因为我只是想限制某些由谷歌的方式，是不可能通过谷歌API返回的结果）。

假设我有这样的code：

  $（＃地址）。自动完成（{
  来源：函数（请求，响应）{
    autoCompleteService =新google.maps.places.AutocompleteService（）;
    autoCompleteService.getQuery predictions（{输入：request.term}，autocompleteCallback）;
    //我应该什么地方称之为响应对象，所需的建议作为参数
  }，
  的minLength：5，
}）;
 

问题是，jQuery用户界面自动完成迫使我打电话与建议的回应的对象（这实际上是一个功能），我想展现给用户作为参数。<​​/ P>

不过，在另一方面，谷歌API的力量我定义一个回调函数（在我的情况autocompleteCallback'）向谁提供所要求的建议作为参数，它的完成了。

当然，我不能叫'autocompleteCallback功能里面的响应对象，只是这行后我不能叫响应对象之一：

  autoCompleteService.getQuery predictions（{输入：request.term}，autocompleteCallback）;
 

由于JS是异步，我不能肯定，我得到在假设的东西。我为了打发结果使用全局变量

什么是该解决方案？
是否有这样吗？

一个问题一个著名的JS设计模式

解决方案

您，先生，是两个框架结合起来天才！所以，我给大家介绍的解决方案，我有：

  $（＃搜索）。自动完成（{
    来源：函数（请求，响应）{
        autoCompleteService.getQuery predictions（{输入：request.term}，功能（predictions，地位）{
            如果（状态！= google.maps.places.PlacesServiceStatus.OK）{
                警报（状态）;
                返回;
            }
            响应（$。地图（predictions，功能（prediction，我）{
                返回{
                    标签：prediction.description，
                    价值：prediction.description
                }
            }））;
        }）;
    }，
    选择：函数（事件，UI）{
        VAR值= ui.item.value;
        sea​​rchMap（值）;
    }
}）;
 

当然，我有一个实际的功能，做适当的位置查找（ searchMap（）），它发生在一个术语。为了有一个合适的 autocompleteCallback 和响应的唯一现实办法做到这一点处理程序jQuery用户界面自动完成是保持回调执行内联。如果你想这样做在多个地方，但我没有想到的更好的东西它吮吸。然而...

I am trying to use jQuery UI Autocomplete feature in order to make a wrapper of Google Autocomplete 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").autocomplete({
  source: function(request, response){
    autoCompleteService = new google.maps.places.AutocompleteService();
    autoCompleteService.getQueryPredictions({input: request.term }, autocompleteCallback);
    //I should somewhere call the "response" object with desired suggestions as arguments
  },
  minLength: 5,
});

The problem is that jQuery UI Autocomplete 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 'autocompleteCallback') to whom it gives the requested suggestions as parameters after it's done.

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

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

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?

解决方案

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

$("#search").autocomplete({
    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 autocompleteCallback AND response handler for jQuery UI autocomplete 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...

这篇关于通过jQuery UI的自动完成功能总结谷歌地方自动填充服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！