I'm using Google maps autoplete script and its working fine, but how to clear input if user has not select anyone from a dropdown list?

For example: Current situation: User enter "New" and see "New york" in a list, but do not choose it (clicks anywhere outside the input), and now intup has value "New". I want: User enter "New" and see "New york" in a list, but do not choose it (clicks anywhere outside the input), and now intup has empty value, because nothing in the list is not selected.

My current code:

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

   }
</script>

I'm using Google maps autoplete script and its working fine, but how to clear input if user has not select anyone from a dropdown list?

For example: Current situation: User enter "New" and see "New york" in a list, but do not choose it (clicks anywhere outside the input), and now intup has value "New". I want: User enter "New" and see "New york" in a list, but do not choose it (clicks anywhere outside the input), and now intup has empty value, because nothing in the list is not selected.

My current code:

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

   }
</script>

• javascript
• jquery
• autoplete

2 Answers 2

You will need to have a variable to save the fact that a value was selected, and then when someone focus/blur the input - reset the value of the input if needed.

Here is an example:

var selected = false;

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

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

I found a way that seems better to me, you can define an "old value" that changes only by "place_changed" callback. Then, on "blur" event you should refill the value with last picked one (or the initial value). This way the field value is consistent, it's empty or a valid picked value.

var oldaddress = $("input[name='address']").val();

$("input[name='address']").on('blur', function () {
  $(this).val(oldaddress);
});

function initAutoplete() {
  autoplete = new google.maps.places.Autoplete(
    document.getElementById('address'),
    {types: [(cities)]}
  );
  autoplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  var place = autoplete.getPlace();
// ....
  oldaddress = $("input[name='address']").val();
}