Google Places Autocomplete SearchBox: Steuern (aktivieren/deaktivieren) Vorhersagen

Question

Ist es möglich, Google Places Autocomplete SearchBox (google.maps.places.SearchBox) Dienstprognosen zu steuern (aktivieren/deaktivieren)?

Oder mit anderen Worten: Ist es möglich, HTML-Eingabeelement vorübergehend vom Autocomplete SearchBox-Dienst zu trennen und dann wieder anzubringen?

Die Sache ist, dass ich Service-Ergebnisse nur nach HTML-Eingabe-Element anzeigen, die an SearchBox-Dienst angeschlossen sind. Das Problem besteht darin, dass nach der Anzeige von Ergebnissen und der Fokussierung des Benutzers auf das Eingabeelement Vorhersagen über die Ergebnisse angezeigt werden und ihre Ansicht verdecken. Ich möchte Vorhersagen deaktivieren, bis der Text im Eingabeelement vom Benutzer geändert wird.

EDIT 26/Aug/2016:

Disable Prognosen derzeit nicht von dem Javascript-API unterstützt. Daher habe ich gerade eine Feature-Anfrage bei Google eröffnet. Wenn Sie an der Funktion interessiert sind, stimmen Sie bitte dafür ab: Autocomplete SearchBox - Control (enable/disable) predictions..

EDIT 07/Sep/2016 - Prämie award Update:

Dank allen, die bei der Beantwortung teilgenommen und auch die Frage der Förderung.

Hauptziel der Auszeichnung war es, eine Lösung mit den derzeit verfügbaren Mitteln zu finden. Ich fürchte, das ist nicht passiert, also habe ich beschlossen, das Kopfgeld nicht zu vergeben.

Obwohl keine der Antworten unten eine Lösung bietet, bietet jede eine Art von Blei, also danke! Vielleicht werden diese Hinweise in Zukunft auf eine Lösung hinweisen.

Zweites Ziel der Auszeichnung (obwohl nicht direkt kommuniziert) war die Förderung Autocomplete SearchBox - Control (enable/disable) predictions Feature-Anfrage. Sein Status wurde in NeatIdea geändert und ihm wurde eine interne Tracking-Nummer zugewiesen. Es ist ein gutes Zeichen.

Answer 1

Meine Lösung in AngularJS - es ist ein Auszug aus einer Richtlinie.

.pac-contained wird erstellt, nachdem die Instanz eines Autocomplete-Dienstes erstellt wurde, z. B. new google.maps.places.Autocomplete(…) oder new google.maps.places.SearchBox(…). Jetzt finde ich gerade erstellt .pac-container in dem Dokument, speichern Sie seine Referenz und markieren Sie diesen Container als bereits verarbeitet (durch Hinzufügen einer beliebigen Klasse .predictions-control darauf). Jetzt kann ich ganze .pac-contained mit Vorhersagen verstecken oder zeigen.

// 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 

Anruf init() direkt nach Dienstinstanz erstellt:

// 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(); 

Hinweis: Solange sichergestellt ist, dass zwei automatische Vervollständigung Dienste sind nicht in der gleichen Zeit erstellt (zB jeden Dienst ist auf der anderen Registerkarte) oder kann mit der Erstellung des nächsten Dienstes warten, bis .pac-container für den vorherigen Dienst gefunden wird, funktioniert es zuverlässig auch mit mehreren Instanzen von Autocomplete-Dienst.

Answer 2

Es gibt keinen Weg, oder viel Sinn, einen zu haben: Vorhersagen sind der springende Punkt , sein Grund zu sein. Wenn Sie keine Vorhersagen wünschen, können Sie einfach Text Search in the Places library verwenden.

Wenn der Benutzer erneut auf das Suchfeld klickt/fokussiert, hat er wahrscheinlich nicht auf die Ergebnisse geachtet, die durch die Vorschläge verdeckt werden. Das gleiche Verhalten ist in Google Maps, und es ist kein Problem, oder?

Wenn Sie keinen Platz zwischen der SearchBox und den Ergebnissen (wie in this tool) haben können, und Sie unbedingt Vorschläge für einen Moment deaktivieren müssen, würde ich sagen, Sie können das google.maps.places.SearchBox Objekt zerstören und später ein neues erstellen, an das gleiche HTML-Eingabeelement angehängt.

Answer 3

Was Sie tun können ist, Nachdem der Benutzer den Ort ausgewählt hat, können Sie eine Klasse disabled zu diesem Eingabefeld hinzufügen .., Dies wird Ihnen helfen, Vorhersagen basierend auf Klassennamen zu aktivieren/deaktivieren.

Und wo Sie den Code für die automatische Vervollständigung haben, können Sie es innerhalb sonst wenn Anweisung umschließen.

Dies wird die automatische Vervollständigung entfernen, nachdem der Benutzer einen Ort auswählt ..und später, wenn Sie möchten, können Sie die Klasse disabled aus diesem Feld entfernen und es wird wieder funktionieren.

Answer 4

Möglicherweise wertvolle Informationen.

Dies ist relevant um API V3.29 (nicht sicher, ob es immer genau sein wird).
Das div-Element, das die API für die automatische Vervollständigung erstellt, hat eine Klasse von "pac-container pac-logo".
Mit document.querySelector ('.pac-container') können Sie möglicherweise das anzuzeigende style-Attribut festlegen: None bei einem click-Ereignis an einer anderen Stelle.

HINWEIS: Wenn Ihre Benutzer in die searchBox zurückklicken, ändert google das Stilattribut zurück auf das, was angemessen ist. Sie müssen es also nur einmal einstellen, Sie sollten es nicht erneut einstellen müssen.
(Dies kann einfacher und sauberer als eckig beteiligt sein).

Hoffnung, dass jemand hilft (ich hatte eine CSS-Regel hinzufügen, um den Z-Index in einer Anwendung erhöhen die Autovervollständigung angezeigt zu machen)