8

我已將Google Maps JavaScript API V3中的google.maps.places.Autocomplete添加到基本搜索表單中。我試圖找到一種可靠的方法來檢測用戶是否從自動完成列表中選擇了一項(使用鼠標或鍵盤)或正在提交自由格式的文本。Google Places Autocomplete在按下回車鍵後提交表單提交時,會自動彈出place_changed事件

代碼:http://jsfiddle.net/2rhL3cyk/1/

我測試針對以下基本方案,每個應導致表單提交。 locMatch應該是真實的,如果用戶選擇了一個自動完成項目。

  1. 進入自由的文本,按下回車鍵:
    • place_changed解僱
    • 的onsubmit解僱。 locMatch:假
  2. 輸入文本,使用下拉箭頭來選擇一個地方,然後回車:
    • 的onsubmit解僱。 locMatch:假
    • place_changed解僱(爲時已晚!)
  3. 輸入文本,用鼠標選擇一個地點,然後提交:
    • place_changed解僱
    • 的onsubmit解僱(點擊發生之後)。 locMatch:真
  4. 輸入文本,用鼠標選擇一個地方,改變文字的自由形式的字符串(點擊按鈕後),按回車鍵:
    • place_changed解僱(點擊發生之後)
    • place_changed解僱(輸入新文字並點擊輸入)
    • onSubmit已解僱。 locMatch:假
  5. 輸入文本,用鼠標選擇一個地方,改變文本字符串自由,點擊提交:
    • place_changed解僱
    • 的onsubmit解僱(點擊發生之後)。 locMatch:真
  6. 輸入文本(輸入新文本,點擊按鈕後),用鼠標選擇一個地方,輸入新的文本,使用下拉箭頭來選擇一個地方,然後回車
    • place_changed解僱(點擊後放置)
    • onSubmit已解僱。 locMatch:真(輸入新文本,點擊按鈕後)
    • place_changed解僱

只有病例1,3,和4按預期方式工作。

在#2中,onSubmit在place_changed之前被觸發,因此它沒有機會在表單提交後才設置locMatch。它無助於手動觸發place_changed,因爲即使輸入字段具有正確的文本,autocomplete.getPlace()仍然未定義,直到表單提交後觸發。我能夠迫使它與一個可怕的setTimeout黑客的工作,像這樣:

$('#loc_search').submit(function (e) { 
    setTimeout(function() { 
    console.log('submit for real! locMatch:', locMatch); 
    $(this).submit(); 
    }, 150); 
}); 

我真的想找到一個更明智的方法來解決這個問題。我想象超時值可能取決於用戶的機器規格,我不希望有任何不必要的延遲。

在#5中,在按回車後根本不調用place_changed。我再次嘗試在提交處理程序中手動觸發place_changed事件,但這不起作用,因爲即使用戶在輸入字段中輸入了getPlace(),也會返回先前選擇的值。解決這個問題的一種方法是通過重新設置locMatches來改變,但是這會突破下面的#6。

$('#location').change(function() { 
    locMatch = false; 
}); 

在#6,locMatch還是從以前的點擊真實,所以它確實給了預期的結果,但由於place_changed仍在表單提交後被解僱它不是技術上是正確的。 #5的上述修復打破了這種情況,然而上面的setTimeout方法再次修復了它。

我一直在這一整天拉我的頭髮,任何意見將不勝感激。謝謝!

+0

自動填充服務是異步的。結果從服務器返回需要時間。 – geocodezip 2014-11-22 03:48:36

+0

但這不是問題。結果已經在所有上述情況中恢復。 – hackel 2014-11-22 22:09:14

回答

1

這裏有完全相同的問題。自動完成庫不提供除place_changed以外的任何其他事件。也沒有狀態屬性,例如request_pending。

這裏有一個來自mmalone的「黑客」:Google Autocomplete - enter to select 工作對我很好。