2

我正在尝试使用 jQuery UI 自动完成功能来制作 Google 自动完成服务的包装器（因为我只想以无法通过 Google API 的方式限制 Google 返回的一些结果）。

假设我有这个代码：

$("#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,
});

问题是 jQuery UI Autocomplete 迫使我调用“响应”对象（实际上是一个函数），并带有我想向用户显示的建议作为参数。

但是，另一方面，Google API 迫使我定义一个回调函数（在我的例子中是“autocompleteCallback”），它在完成后将请求的建议作为参数提供给它。

当然，我不能在 'autocompleteCallback' 函数中调用 'response' 对象，也不能在此行之后调用响应对象：

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

因为 JS 是异步的，所以我不能确定我得到了什么，比如说：我用来传递结果的全局变量。

解决方案是什么？对于这样的问题，是否有众所周知的 JS 设计模式？

4

1 回答 1

7

先生，您是结合这两个框架的天才！所以我将分享我拥有的解决方案：

$("#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);
    }
});

当然，我有一个实际的函数来执行正确的 Place 查找 ( searchMap())，它包含一个术语。为了让 jQuery UI 自动完成具有适当的autocompleteCallbackANDresponse处理程序，唯一现实的方法是保持回调实现内联。如果您想在多个地方执行此操作，那就太糟糕了，但我没有想到更好的方法。然而...

于 2012-12-08T03:48:18.890 回答