Component Methods (Imperative API)

While props offer a declarative way to configure the component, there are times when you need to programmatically control its behavior. For these advanced use cases, you can get a direct reference to the component instance using Svelte's bind:this directive.

This imperative approach is useful for tasks like clearing the input from an external button, integrating with form libraries, or calling methods from a parent component.

Live Demo

Use the buttons below to interact with the component instance directly.

Methods Reference

The following methods are available on the component instance.

Method	Signature	Description
`clear()`	`() => void`	Clears the text input, removes suggestions, and resets the session token.
`focus()`	`() => void`	Sets focus on the text input field.
`getRequestParams()`	`() => RequestParams`	Returns the current internal `requestParams` object being used for API calls.
`setRequestParams()`	`(params: Partial<RequestParams>) => void`	Dynamically updates request parameters. Useful for changing search criteria (region, language, location bias, etc.). Parameters are merged with existing ones.
`getFetchFields()`	`() => string[]`	Returns the current array of Place Data Fields that will be requested when a place is selected.
`setFetchFields()`	`(fields: string[]) => void`	Dynamically updates the Place Data Fields to fetch when a place is selected. Useful for optimizing API costs by requesting only needed fields.

clear(): Clears the text input, removes suggestions, and resets the session token.; () => void
focus(): Sets focus on the text input field.; () => void
getRequestParams(): Returns the current internal `requestParams` object being used for API calls.; () => RequestParams
setRequestParams(): Dynamically updates request parameters. Useful for changing search criteria (region, language, location bias, etc.). Parameters are merged with existing ones.; (params: Partial<RequestParams>) => void
getFetchFields(): Returns the current array of Place Data Fields that will be requested when a place is selected.; () => string[]
setFetchFields(): Dynamically updates the Place Data Fields to fetch when a place is selected. Useful for optimizing API costs by requesting only needed fields.; (fields: string[]) => void

Common Use Cases

Here are some practical scenarios where component methods are particularly useful:

Form Integration

Clear the autocomplete input when a form is reset or submitted:

const handleFormReset = () => {
  autocompleteComponent?.clear();
  // Reset other form fields...
};

Dynamic Language Switching

Update the search language when the user changes their preferences:

const switchLanguage = (lang: string) => {
  autocompleteComponent?.setRequestParams({ 
    language: lang 
  });
};

Cost Optimization

Dynamically adjust which fields to fetch based on user needs to save API costs:

// For basic display, fetch minimal fields
autocompleteComponent?.setFetchFields(['formattedAddress']);

// For detailed mapping, fetch more data
autocompleteComponent?.setFetchFields([
  'formattedAddress', 'location', 'viewport', 'types'
]);

Geographic Filtering

Update location bias when user selects a different region or moves the map:

const updateLocationBias = (lat: number, lng: number) => {
  autocompleteComponent?.setRequestParams({
    locationBias: {
        lat: lat,
		lng: lng
        radius: 5000 // 5km radius
    }
  });
};

Full Code Example

The example below shows how to bind to the component instance and call its methods from buttons.


<script lang="ts">
    import { PlaceAutocomplete } from 'places-autocomplete-svelte';
    import type { PlaceResult, ComponentOptions, RequestParams } from 'places-autocomplete-svelte/interfaces';

    let autocompleteComponent: PlaceAutocomplete | undefined = $state(undefined);

    // --- Event Handlers ---
    const handleResponse = (response: PlaceResult) => {
        console.log('Place Selected:', response);
    };

    const handleError = (error: string) => {
        console.error('Places Autocomplete Error:', error);
    };
</script>

<PlaceAutocomplete
    bind:this={autocompleteComponent}
    {PUBLIC_GOOGLE_MAPS_API_KEY}
    {onError}
	{onResponse}
/>

<div class="controls">
    <button onclick={() => autocompleteComponent?.clear()}>Clear</button>
    <button onclick={() => autocompleteComponent?.focus()}>Focus Input</button>
    <button onclick={() => console.log(JSON.stringify(autocompleteComponent?.getRequestParams(), null, 2))}>
        Get Request Params
    </button>
</div>

Previous: Request Parameters Playground
Next: Styling