Googleプレイスオートコンプリートサーチボックス：予測を制御する（有効/無効にする）

Question

Googleプレイスオートコンプリートサーチボックス（google.maps.places.SearchBox）サービスの予測を制御する（有効/無効にする）ことはできますか？

つまり、HTML入力要素をオート​​コンプリート検索ボックスサービスから一時的に切り離してから再接続することはできますか？

サービス結果は、SearchBoxサービスに添付されたHTML入力要素の直後に表示されます。問題は、結果が表示された後、ユーザーが入力要素に戻ってくると、結果が予想以上に表示され、表示が不明瞭になるという問題です。入力要素のテキストがユーザーによって変更されるまで、予測を無効にしたいと思います。

EDIT 26/8月/ 2016：

無効化予測は、現在のJavaScript APIでサポートされていません。そのため、私はGoogleに機能リクエストを開いたばかりです。この機能に興味がある場合は、Autocomplete SearchBox - Control (enable/disable) predictions.に投票してください。

EDIT 07/9月/ 2016 - バウンティ賞の更新：

答えるに参加した人あなたのすべてに感謝し、また、問題を促進しました。

賞の主な目的は、現在利用可能な手段を使用して解決策を見つけることでした。私は賞金を授与しないことにしたので、これは起こらなかったのではないかと思います。

いずれの回答も解決策を提供していませんが、それぞれが何らかの鉛を提供していますので、ありがとうございます！たぶんこれらのリードは将来の解決策を指し示すでしょう。

賞の副次目的（直接通信はしていませんが）は、Autocomplete SearchBox - Control (enable/disable) predictions機能リクエストを促進することでした。そのステータスはNeatIdeaに変更され、内部の追跡番号が割り当てられました。それは良い兆候です。

Answer 1

私の解決策はAngularJSです。これは指示の抽出物です。オートコンプリートサービスのインスタンスが作成された後

.pac-containedは、例えば、作成された：new google.maps.places.Autocomplete(…)又はnew google.maps.places.SearchBox(…)を。今すぐ文書内に.pac-containerを作成し、その参照を保存し、そのコンテナを既にプロセスとしてマークします（任意のクラス.predictions-controlを追加することによって）。 今度は、予測を伴う.pac-contained全体を表示または非表示にすることができます。

// Container element with predictions. 
var pacContainer = null; 

/*** 
* Find predictions container without predictions-control class set. 
* Then set predictions-control class to it and convert it into 
* Angular's jqLite object. 
* @return {jqLite object} - container or null when not found. 
*/ 
function getPredictionsContainer() { 
    // Get div.pac-container without predictions-control class. 
    var e = document.querySelector('div.pac-container:not(.predictions-control)'); 
    if (e){ 
     var container = angular.element(e); 
     container.addClass('predictions-control'); 
     console.log('predictions-control: Container found.'); 
     return container; 
    } else { 
     console.warn('predictions-control: Container not found!'); 
    } 
    return null; 
} // getPredictionsContainer 

/*** 
* Loop in 50ms intervals until container is found. 
*/ 
function untilContainerFound(){ 
    pacContainer = getPredictionsContainer(); 
    if (pacContainer == null){ 
     $timeout(untilContainerFound, 50); 
    } 
} // untilContainerFound 

this.init = function() { 
    untilContainerFound(); 
}; // this.init 

/*** 
* Prevent predictions to be displayed when user clicks on the 
* input element. It is achieved by adding ng-hide CSS class to 
* predictions container. Predictions container is identified by 
* ".pac-container" CSS class selector. 
*/ 
this.hidePredictions = function() { 
    // If predictions container was not found at directive 
    // initialization try to find it now. 
    if (pacContainer === null){ 
     pacContainer = getPredictionsContainer(); 
    } 
    if (pacContainer){ 
     console.log('predictions-control: Hiding predictions.'); 
     pacContainer.addClass('ng-hide'); 
    } else { 
     console.warn('predictions-control: Container not found!'); 
    } 
}; // this.hidePredictions 

/*** 
* Show predictions again by removing ng-hide CSS class from 
* predictions container. 
*/ 
this.showPredictions = function() { 
    console.log('predictions-control: Showing predictions.'); 
    if (pacContainer){ 
     pacContainer.removeClass('ng-hide'); 
    } 
}; // this.showPredictions 

コールinit()適切なサービスインスタンスが作成された後：

// Create SearchBox service for auto completing search terms. 
autocomplete = new google.maps.places.SearchBox(inputElem[0]); 
// OR 
// autocomplete = new google.maps.places.Autocomplete(.....); 
autocomplete .addListener('places_changed', callback); 

predictionsCtrl.init(); 

注： 限り、2つのオートコンプリートサービスが同時に作成されていないことが保証されるよう（例：各サービス別のタブにある）、または、前のサービスのために.pac-containerが見つかるまで次のサービスの作成を待つことができます。これは、オートコンプリートサービスの複数のインスタンスでも確実に機能します。

Answer 2

1つの方法で、または多くのポイントはありません：予測は、の全体のポイント、その理由です。予測が必要ない場合は、Text Search in the Places libraryを使用してください。

ユーザーが検索ボックスを再度クリック/フォーカスした場合、候補によって隠された結果はユーザーが気にしなかったでしょう。 Google Mapsでは同じ動作があり、それは問題ではありませんか？

SearchBoxと結果（this toolなど）の間にスペースを入れることができず、しばらく候補を無効にする必要がある場合は、google.maps.places.SearchBoxオブジェクトを破棄して後で新しいものを作成し、同じHTML入力要素にアタッチされます。

Answer 3

あなたができることは、ユーザーが場所を選択した後で、その入力フィールドにクラスdisabledを追加することができます。これは、クラス名に基づいて予測を有効/無効にするのに役立ちます。

どこにオートコンプリートコードがあるかは、else文で囲むことができます。

let field = document.getElementById('location'); 
if (field.className.indexOf('disabled') > -1) { 
    google.maps.event.clearInstanceListeners(field); 
} 
else { 

    let autocomplete = new google.maps.places.Autocomplete(field, {types: ['geocode']}); 
    autocomplete.addListener('place_changed',() => { 
    let place = autocomplete.getPlace(); 
    let filed_val = field.value; // incase you need it 
    field.classList.add('disabled'); 
    }); 

} 

これは、ユーザーが場所を選択した後に自動補完を削除します。必要に応じて後でこのフィールドからdisabledクラスを削除すると、再び機能します。

Answer 4

おそらく貴重な情報です。

これはAPI V3.29に関連しています（正確であるかどうかは不明です）。
APIがオートコンプリート用に作成するdiv要素には、「pac-container pac-logo」というクラスがあります。
document.querySelector（ '.pac-container'）を使用すると、他のクリックイベントでnone：を表示するようにスタイル属性を設定できる場合があります。

注：ユーザーがsearchBoxをクリックすると、Googleはスタイル属性を適切なものに戻します。そのため、一度設定するだけで済みます。再度設定する必要はありません。
（これは、角度に関係するよりも簡単で清潔です）。

誰か（私はオートコンプリートを表示するために、アプリケーションでのzインデックスを高めるためにCSSルールを追加する必要がありました）