Googleマップオートコンプリート - 何も選択されていない場合は入力をクリアする

Question

私はGoogleマップのオートコンプリートスクリプトを使用していますが、正常に動作しますが、ユーザーがドロップダウンリストから誰かを選択しなかった場合、 現在の状況： ユーザーは「New」と入力してリストに「New York」と表示しますが、選択しないでください（入力外の場所をクリックすると）、値が「New」になります。 リスト内の何も選択されていないので、ユーザは "New"と入力してリスト内の "New York"を選択します。

私の現在のコード：

<input id="autocomplete2" placeholder="Enter your address" onFocus="initAutocomplete2()" type="text"> 
<script> 
    function initAutocomplete2() { 
     autocomplete2 = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete2')), 
      {types: ['(cities)']}); 

    } 
</script> 

Answer 1

あなたが値を選択したという事実を保存する変数を持っている必要があり、その後、誰かが集中したときに/入力をぼかします - 必要に応じて、入力の値をリセット。ここで

は一例です：

var selected = false; 
 

 
function initAutocomplete2() { 
 
    autocomplete2 = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */(document.getElementById('autocomplete2')), 
 
    {types: ['(cities)']}); 
 
    
 
    autocomplete2.addListener('place_changed', function() { 
 
    selected = true 
 
    }); 
 
} 
 
$('#autocomplete2').on('focus', function() { 
 
    selected = false; 
 
    }).on('blur', function() { 
 
    if (!selected) { 
 
     $(this).val(''); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="autocomplete2" placeholder="Enter your address" onFocus="initAutocomplete2()" type="text">