2

Google オートコンプリート サービスのラッパーを作成するために、jQuery UI オートコンプリート機能を使用しようとしています (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」関数内で「応答」オブジェクトを呼び出すことはできません。また、次の行の直後でも応答オブジェクトを呼び出すことはできません。

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

JS は非同期であるため、たとえば、結果を渡すために使用するグローバル変数を取得できるかどうか確信が持てませんでした。

そのための解決策は何ですか？このような問題に対するよく知られた JS デザイン パターンはありますか?

4

1 に答える 1

7

あなたは、2 つのフレームワークを組み合わせる天才です! だから私が持っている解決策を共有します：

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

もちろん、searchMap()用語を受け取る適切な Place lookup ( ) を実行する実際の関数があります。jQuery UI オートコンプリート用の適切なautocompleteCallbackANDハンドラーを持つためにこれを行う唯一の現実的な方法は、コールバックの実装をインラインに保つことです。responseこれを複数の場所で実行したい場合は残念ですが、それ以上のことは考えていません。まだ...

于 2012-12-08T03:48:18.890 に答える