Reactive parameters

A frequent requirement is to change the search criteria based on user input, like filtering by country or change results language . Use Svelte's {#key...} blocks to dynamicaly update the requestParams.

Region

United KingdomGeeceItaly

Language

English (United Kingdom)GeeekItalian (Italy)Russian

powered by

Code

Copy and paste the following code into your Svelte application and replace ___YOUR_API_KEY___ with your actual API keyto start using the Places Autocomplete Svelte component.

<script lang="ts">
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
// Google Maps API key
const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';
/**
 * fullResponse - Unformatted response from Google Places API
 */
let fullResponse: {} | null = $state(null);

// Error handling
let placesError = $state('');
// Error handler function
let onError = (error: string) => {
	placesError = error;
};
// Response handler function
let onResponse = (response: any) => {
	// response is the full response object from the Google Places API
	fullResponse = response;
};

/**
 * @type object optional
 * List of accepted AutocompleteRequest properties
 */
let requestParams = $state({
	/**
	 * @type string optional
	 */
	language: 'en-gb',
	/**
	 * @type string optional
	 */
	region: 'GB'
});	


// Unique key
let unique = $state({}); // every {} is unique, {} === {} evaluates to false
let resetComponent = () => {
	unique = {};
};

// Region options
const regions = $state([
	{ value: 'GB', label: 'United Kingdom' },
	{ value: 'GR', label: 'Geece' },
	{ value: 'IT', label: 'Italy' }
]);
let selectedRegion = $state('GB');

// Language options
const languages = $state([
	{ value: 'en-gb', label: 'English (United Kingdom)' },
	{ value: 'el', label: 'Geeek' },
	{ value: 'it-it', label: 'Italian (Italy)' },
	{ value: 'ru', label: 'Russian' }
]);
let selectedLanguage = $state('en-gb');

/**
 * Handle change
 * @param e
 */
let handleChange = (e: Event) => {
	const target = e.target as HTMLSelectElement;
	const value = target.value || '';
	const propTarget = target.dataset.value || '';
	switch (propTarget) {
		case 'region':
			requestParams.region = value;
			break;
		case 'language':
			requestParams.language =  value;
			break;
		default:
			break;
	}
	resetComponent();
};
</script>

<label for="region">Region</label>
<select 
	id="region" 
	name="region" 
	bind:value={selectedRegion} 
	onchange={handleChange} 
	data-value="region">
{#each regions as r}
	<option value={r.value}>
		{r.label}
	</option>
{/each}
</select>
		

<label for="language">Language</label>
<select
	id="language"
	name="language"
	bind:value={selectedLanguage}
	onchange={handleChange}
	data-value="language">
	{#each languages as r}
		<option value={r.value}>
			{r.label}
		</option>
	{/each}
</select>


{#if pacError}
	<p class="error">{pacError}</p>
{/if}	
{#key unique}
	<PlaceAutocomplete 
		{onError} 
		{onResponse} 
		requestParams={$state.snapshot(requestParams)}
		{PUBLIC_GOOGLE_MAPS_API_KEY} 
	/>
{/key}
		
			
<p>Response Object: {JSON.stringify(fullResponse, null, 2)}</p>