Retain Input Value Example - Places Autocomplete JS

Retain Input After Selection

This example demonstrates how to keep the selected address in the input field after a user makes a selection.

By default, the input is cleared. You can change this behavior by setting the clear_input option to false. This is particularly useful for forms where the user might want to review their selected address before submitting.

Formatted Address

							Response JSON

Implementation:

<script>
import { PlacesAutocomplete } from 'places-autocomplete-js';

document.addEventListener('DOMContentLoaded', () => {
  try {
    const autocomplete = new PlacesAutocomplete({
      containerId: 'autocomplete-container',
      googleMapsApiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // Replace with your actual key
      onResponse: (placeDetails) => {
        console.log('Place Selected:', placeDetails);
      },
      onError: (error) => {
        console.error('Autocomplete Error:', error.message || error);
      },
       options:{
          clear_input: false, // Retain input value after selection
        }
    });
  } catch (error) {
    console.error("Failed to initialize PlacesAutocomplete:", error.message);
  }
});

</script>

...
<div id="autocomplete-container"></div>
...