Retain Input Value After Selection

By default, the component clears the input field after a user selects a place. This is often the desired behavior for a "search" action. However, in many cases, such as filling out a form, you may want the selected address to remain visible in the input. This example shows how to achieve this.

Live Demo

Search for a location below. After selecting an address from the suggestions, its value will remain in the input field.

How It Works

This behavior is controlled by a single property within the options object:

clear_input: false: By setting this property to `false`, you override the default behavior and instruct the component to keep the user's selected value in the input field.

const options = {
  clear_input: false
};

Full Code Example

Here is the complete code for this example. Simply set `clear_input` to `false` in your options.

<script>
// ...

// Control component appearance and behavior
const options: Partial<ComponentOptions> = $state({
	clear_input: false, // <-- Retain input value after selection
});

</script>

<PlaceAutocomplete
    {PUBLIC_GOOGLE_MAPS_API_KEY}
    {options}
    {onResponse}
    {onError}
/>

Previous: Reactive Parameters
Next: Map Integration