谷歌地圖自動完成，修復輸入

我想添加谷歌地圖自動完成輸入到我的離子應用程序。除了當我滾動時，它工作得很好。由於圖像上顯示：谷歌地圖自動完成，修復輸入

所以我嘗試不同的東西像改變的.pac容器的位置，但它並沒有解決問題。當我檢查頁面時，看起來結果容器加載在頁面末尾，所以將塊粘在輸入欄上並不容易。

我已經到處搜索，並沒有找到任何合適的解決方案？有人有一個想法如何做到這一點？（它實際上只是一個簡單的代碼是這樣的：

function initialize() { 
      var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']} 
     new google.maps.places.Autocomplete(
     (document.getElementById('autocomplete')), options); 
    } 

    initialize();

jsfiddle

在此先感謝，羅賓FOURCADE

來源

2016-10-19 Robin Fourcade

我不能在你的提琴自動完成框看起來不錯的滾動，你有沒有遇到這個問題，它的瀏覽器重現無問題？ –

嗨，這裏是一個更新的：http://jsfiddle.net/GVdK6/268/我在每個瀏覽器（所以在我的Android也）的問題。 –

嗨，有什麼想法嗎？ :) –

我現在能夠重現問題，解決的方法就是加入position: relative你的包裝box和position: absolute到你的#autocomplete輸入。

我得到了解決方案檢查the example由Google團隊提供。

我已經更新your fiddle到解決方案相匹配，但它是這樣的：

您更新CSS：

.box { 
    position: relative; 
    height: 200vh; 
} 

#autocomplete { 
    width:350px; 
    position: absolute; 
}

來源

2016-10-24 13:00:51

嗨，謝謝你的回答，但問題來了，當我添加一個滾動的div爲例：http://jsfiddle.net/GVdK6/272/ –

這似乎是因爲div結果彈出在HTML，它與輸入無關。我試過一些DOM修改，但我不認爲它是解決方案。：/ –

我有同樣的問題。我的解決方案是：

$('#inputContainer').scroll(function(){ 
    //Set new top to autocomplete dropdown 
    newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight(); 
    $('.pac-container').css('top', newTop + 'px'); 
    } 
});

此更新容器滾動時的下拉位置。

來源

2017-02-11 19:23:41 user3089590

我剛剛遇到同樣的問題，當我在一個可滾動的模態內的窗體上實現自動完成。如果您只有一個自動完成對象，那麼解決方案相對容易。

首先確保您的元素的父項具有相對位置。

然後，你需要選擇該.pac容器，並追加到父。

$("#autocomplete").parent() 
    .css({position: "relative"}) 
    .append(".pac-container");

最後，設置該.pac容器左側和頂部位置是你的元素下面。這需要在一個樣式表來完成與！重要聲明，以確保它overrides通過谷歌的代碼中設置內嵌樣式。
```
// these values will need to be calculated based on your layout 
.pac-container { 
    top: 40px !important; 
    left: 0px !important; 
} 
```

此，如果你有多個自動完成功能顯然不會工作對象在一個頁面上。幸運的是，我想出了一個辦法來處理方案並於最近發表在jQuery plugin設計使自動填入地址形成一個微風。

來源

2017-06-04 06:24:11 tmentink

我得到了解決檢查the example與位置錯誤時滾動

function initAutocomplete() { 
     //....codes... 
     //....add this code just before close function... 
    setTimeout(function(){ 
       $(".pac-container").prependTo("#mapMoveHere"); 
      }, 300); 
}

https://codepen.io/gmkhussain/pen/qPpryg

來源

2017-10-05 13:12:18

谷歌地圖自動完成，修復輸入

回答

相關問題