google Map Apiのautocompleteで、必ず候補が入力されるようにする

Question

下記のurlのように、地名を予測変換してくれるinputフィールドをつくっています。
http://kwski.net/lab/placesautocomplete

予測候補の中から選択せずにフォームを送信したり、別のフィールドを入力した場合に、
候補の一番上に出てきているものが入力されるようにしたいのですが、やり方がわかりません。

現在は下記のような

<input type="text" id="searchTextField">
<script>
function initialize() {
    var input = document.getElementById( 'searchTextField');
    var options = {
        types: ['geocode'],
    };
    autocomplete = new google.maps.places.Autocomplete( input, options);
}
google.maps.event.addDomListener( window, 'load', initialize);
</script>

どなたか詳しい方、ご教授いただけると助かります。

Comments

[kei344]

ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

'place_changed' イベントを拾えば autocomplete.getPlace(); で候補が取得できるようです。

【Place Autocomplete Address Form  |  Google Maps JavaScript API  |  Google Developers】
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=ja

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

【Google Maps JavaScript API V3 Reference  |  Google Maps JavaScript API  |  Google Developers】
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#Autocomplete