7

是否可以控制(啓用/禁用)Google Places自動完成SearchBox(google.maps.places.SearchBox)服務預測?Google Places Autocomplete SearchBox:如何控制(啓用/禁用)預測

或換句話說:是否有可能暫時將HTML輸入元素從Autocomplete SearchBox服務中分離出來,然後重新附加它?

問題是我顯示的服務結果只是連接到SearchBox服務的HTML輸入元素。問題在於,在顯示結果並且用戶將注意力集中在輸入元素上之後,預測會顯示在結果上並遮蔽其視圖。我想禁用預測,直到用戶更改了輸入元素中的文本。

enter image description here

EDIT 26/8/2016

禁用預測目前不被Javascript API支持。因此我剛剛在Google上打開了一項功能請求。如果您對該功能感興趣,請投票支持:Autocomplete SearchBox - Control (enable/disable) predictions.

EDIT 07 /月/ 2016 - 賞金獎勵更新

感謝大家誰參加了回答,並促進問題。

該獎項的主要目的是使用現有的手段找到解決方案。恐怕這沒有發生,所以我決定不獎勵賞金。

雖然沒有答案bellow提供了一個解決方案,每個提供某種領先,所以謝謝!也許這些線索將在未來指向一個解決方案。

該獎項的次要目標(儘管未直接傳達)是宣傳Autocomplete SearchBox - Control (enable/disable) predictions功能請求。其狀態更改爲NeatIdea並已分配內部跟蹤號碼。這是一個好兆頭。

回答

0

我在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服務實例也可以正常工作。

0

有沒有辦法,或有很多的一點:預測是整個點SearchBox,其原因是。如果你不想預測,你可以使用Text Search in the Places library

如果用戶再次點擊/關注搜索框,他/他可能不關心被建議遮蔽的結果。 Google地圖的行爲也是一樣,這不是問題,對嗎?

如果你不能在SearchBox和結果之間放置一些空格(如this tool),並且你絕對必須暫時禁用建議,我會說你可以銷燬google.maps.places.SearchBox對象並在以後創建一個新對象,附加到相同的HTML輸入元素。

+0

它是一個移動應用程序,使屏幕空間和鍵盤點擊次數是在溢價,這是我無法移動結果波紋管,並希望使用'SearchBox'服務(「文本搜索」是'SearchBox'沒有預測)。銷燬並重新創建SearchBox服務不起作用。無論如何,謝謝你的答案。 –

2

你可以做的是,在用戶選擇地點後,你可以添加一個disabled類到該輸入字段..,這將幫助你啓用/禁用基於類名的預測。

如果您有自動完成代碼,您可以將它包裝在if語句中。

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類,它會再次工作。

+0

雖然您使用'google.maps.places.Autocomplete'而不是'google.maps.places.SearchBox',我理解您示例的意義。我不喜歡它通過創建一個新的服務對象來重新啓用預測,而舊的服務對象仍然在內存中。理想的做法是重新啓用舊對象上的DOM事件。 –

+0

準確地說,做什麼是理想的,適合您的需求,這只是爲了向您展示其中的一種方法...... –

0

可能有價值的信息。

這與API V3.29相關(不確定它是否始終準確)。
API爲自動完成創建的div元素具有一個「pac-container pac-logo」類。
利用document.querySelector('。pac-container'),您可以將其style屬性設置爲在別處的點擊事件中顯示:none。

注意:當用戶在searchBox中單擊時,Google會將樣式屬性更改爲適合的任何內容,因此您只需設置一次,就不必將其重新設置。
(這可能比獲取角度更容易和更清潔)。

希望幫助別人(我不得不添加一個CSS規則,以增加的z-index中的應用,使自動完成顯示)

相關問題