我在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();
注: 只要保證兩個自動完成服務並不在同一時間創建(如:每個服務在不同的選項卡上),或者可以等待創建下一個服務,直到找到前一個服務的.pac-container
,即使有多個Autocomplete服務實例也可以正常工作。
它是一個移動應用程序,使屏幕空間和鍵盤點擊次數是在溢價,這是我無法移動結果波紋管,並希望使用'SearchBox'服務(「文本搜索」是'SearchBox'沒有預測)。銷燬並重新創建SearchBox服務不起作用。無論如何,謝謝你的答案。 –