Googleプレイスオートコンプリートでボタンをクリックすると最初の結果が表示されます

Question

GoogleプレイスオートコンプリートとGoogle Maps APIを使用しています。結果が選択されていない場合、最初の結果を選択するために入力と送信ボタンを作成しようとしています。問題は、私がダウンキーまたはアップキーを使用して常に都市を選択する都市を選択するときです。私はいつも、都市が存在しなければ、それを続けることができないようにしようとしています。 「検索結果が見つかりません」というテキストが表示されます。私はこれらの問題を解決する方法を検討しており、解決する方法は見つけられません。私は下に私のコードを入れました。

SCRIPT：

<script> 
google.maps.event.addDomListener(window, 'load', function() { 
(function(input, opts, nodes) { 
    var ac = new google.maps.places.Autocomplete(input, opts); 

    google.maps.event.addDomListener(input, 'keydown', function(e) { 
    if (e.keyCode === 13 && !e.triggered) { 
     google.maps.event.trigger(this, 'keydown', { 
     keyCode: 40 
     }) 
     google.maps.event.trigger(this, 'keydown', { 
     keyCode: 13, 
     triggered: true 
     }) 
    } 
    }); 
    for (var n = 0; n < nodes.length; ++n) { 
    google.maps.event.addDomListener(nodes[n].n, nodes[n].e, function(e) { 

     google.maps.event.trigger(input, 'keydown', { 
     keyCode: 13 
     }) 
    }); 
    } 
} 
(
    document.getElementById('autocomplete'), { 
    componentRestrictions: { 
     country: document.getElementById('hdnLocatorPlace').value 
    }, 
    types: ['(cities)'] 

    }, [{ 
    n: document.getElementById('searchAP'), 
    e: 'click' 
    }] 
)); 
}); 

</script> 

HTML：すべての

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"> 
</script> 

<form> 
<input id="autocomplete"> 
<input type="submit" id="searchAP"> 
<input type="hidden" id="hdnLocatorPlace" value="de"> 

</form> 

Answer 1

まず、API_KEYを取得します。あなたはそれを得ることができますhere。

あなたのオートコンプリートオブジェクト 'ac'に 'place_changed'リスナーを追加する必要があります。 Place AutocompleteとPlace_changedイベントの詳細については、linkをご覧ください。私はまた、あなたが 'enter'を押すと、フォームが送信され、すべてが白に変わることに気付きました。必要であれば 'form'タグを削除できます。

は、ここでは、コードの内訳です：

はあなたプレイスオートコンプリートオブジェクトにリスナーを追加します。

ac.addListener('place_changed', function(){}); 

リスナーの内部では、ac.getPlace（）メソッドを使用して新しい変数場所を作成します。

var place = ac.getPlace(); 

これをリスナー機能に追加します。入力されたアドレスが使用可能かどうかをチェックします。

google.maps.event.addDomListener(window, 'load', function() { 
 
    (function(input, opts, nodes) { 
 
    var ac = new google.maps.places.Autocomplete(input, opts); 
 
    ac.addListener('place_changed', function(){ 
 
     var place = ac.getPlace(); 
 
     if (!place.geometry) { 
 
      // User entered the name of a Place that was not suggested and 
 
      // pressed the Enter key, or the Place Details request failed. 
 
     window.alert("No details available for input: '" + place.name + "'"); 
 
     return; 
 
     } 
 
    }); 
 
    
 
    } 
 
    (
 
    document.getElementById('autocomplete'), { 
 
     componentRestrictions: { 
 
     country: document.getElementById('hdnLocatorPlace').value 
 
     }, 
 
     types: ['(cities)'] 
 

 
    }, [{ 
 
     n: document.getElementById('searchAP'), 
 
     e: 'click' 
 
    }] 
 
)); 
 
});

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ"> 
 
</script> 
 
<input id="autocomplete"> 
 
<input type="submit" id="searchAP"> 
 
<input type="hidden" id="hdnLocatorPlace" value="de">

はそれが役に立てば幸い：

if (!place.geometry) { 
      // User entered the name of a Place that was not suggested and 
      // pressed the Enter key, or the Place Details request failed. 
     window.alert("No details available for input: '" + place.name + "'"); 
     return; 
} 

はここで働いてデモです！