谷歌地圖自動完成 - 查找自動完成的HTML作爲jQuery選擇器使用

-1

TL; DR - 有誰知道谷歌地圖Autocomplete的下拉菜單是什麼？谷歌地圖自動完成 - 查找自動完成的HTML作爲jQuery選擇器使用

我在我的網站上使用Google地圖。我想用jQuery提醒用戶從Google給你的自動完成選項中列出的選項中選擇一個選項。如果用戶點擊了輸入，但沒有選擇其中一個選項，我想然後顯示通知。

但是，我似乎無法找到ID彈出選項列表。（或div或其他HTML。）這些選項的元素中沒有任何內容。

例如：

這裏是我的代碼：

HTML

<label for="title" class="form-title">Location</label> 
<div class="form-row"> 
    <div class="form-group"> 
    <label>Street Address</label> 
    <input type="text" id="formatted_address" name="formatted_address"> 
    </div> 
    <div id="my_map"></div> 
</div>

的Javascript
庫

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&language=en"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.min.js"></script>

代碼

 $("input#formatted_address").geocomplete({ 
      details: "form", 
      map: "#my_map" });

謝謝！

來源

2017-10-16 AlmostPitt

你是否包含'jQuery UI'？ jQuery沒有自動完成「小部件」。 jQuery UI的[autocomplete]（http://api.jqueryui.com/autocomplete/）有一個'select'回調。你可以在這裏使用'event'參數來查找列表項，最後它是ID。不是100％確定，但類似這樣的應該工作：'var selected_item_id = $（event.target）.attr（'id'）;' –

@AlmostPitt嘗試我的解決方案 – krishnar

您使用的是Google Maps JavaScript API v3嗎？嵌入式Google地圖？（地圖的代碼是什麼樣的？） – geocodezip

添加監聽到你自動完成輸入element.This將火每當從自動完成列表

//Declare variable to identify option from autocomplete selected or not 
var selected_from_autocmp_flag = false; 

address_element = new google.maps.places.Autocomplete($("#input_element_id")); 
address_element.addListener('place_changed', place_changed); 

function place_changed(){ 
    // set flag to true 
    selected_from_autocmp_flag = true; 
} 

$("#input_element_id").click(function(){ 
    // set flag to false whenever user clicks it 
    selected_from_autocmp_flag = false; 
})

的下拉用戶選擇選項假設你有input元素在HTML頁面如下

<input type=text id="input_element_id" placeholder="search here"/>

來源

2017-10-16 17:21:49 krishnar

感謝您的回覆@Krishnar。不幸的是，我得到的錯誤：InvalidValueError：不是HTMLInputElement和Uncaught TypeError的實例：a.getAttribute不是函數。 – AlmostPitt

@AlmostPitt哥哥是不是粘貼了？你應該替換你的元素ID來代替input_element_id。檢查我更新的代碼。 – krishnar

好問題。不，我將其更改爲添加正確的ID。實際上，現在我可以看到，當我單擊該輸入框時，會獲得「formatted_address」，但當選擇其中一個選項時，會顯示「未定義」。不過，我仍然有錯誤。 – AlmostPitt

谷歌地圖自動完成 - 查找自動完成的HTML作爲jQuery選擇器使用

回答

相關問題