Input Autocomplete
Single input Autocomplete for quick address search.
Preview
*For this demo, data are mocked. No data are obtained from the Google Maps API. The "powered by google" logo is only for final demonstration purposes.
"use client";
import { Autocomplete } from "@/components/ui/autocomplete";
export function InputAutocomplete() {
const [value, setValue] = useState("");
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
const onPlaceSelect = (details: PlaceDetails) => {
setValue(details.formattedAddress ?? "");
};
return (
<Autocomplete
apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
placeholder="Type to search..."
onPlaceSelect={onPlaceSelect}
onChange={onChange}
value={value}
options={{ language: "en", debounceMs: 350 }}
fetchParams={{ includedPrimaryTypes: ["route"] }}
/>
);
}How it works
When a place is selected, onPlaceSelect fires with the full place details. The component handles displaying the selected address in the input automatically.