Autocomplete

Use Radar's autocomplete component to add address autocomplete to your websites and apps with just a few lines of code.

You can also check out the autocomplete explorer in the dashboard, or check out a full-page maps demo and store locator demo with an autocomplete component.

How it works#

To use the autocomplete component, simply initialize the Radar SDK with your publishable key and specify the container to render the input into.

Configuration#

When creating the autocomplete component, you can provide options to customize the autocomplete behavior, as well as the size and style of the input.

Available options include:

Name	Default	Possible values	Description	SDK availability
`container`	`autocomplete`	string \| HTMLElement	The container to render the autocomplete into. You can specify an `id` of an HTML element or a DOM element. If an `<input>` is provided as a container, the style of the input will not be modified.	Web
`width`	`400`	number \| string	The width of the input, a number (in pixels) or any valid CSS width.	Web
`maxHeight`	`null`	number \| string	The max height of the results list, a number (in pixels) or any valid CSS height.	Web
`near`	`null`	string \| Location	The location to search near, in the format `"latitude,longitude"` or `{ latitude, longitude }`. If not specified, the search will automatically be biased based on the client's IP geolocation.	Web, React Native
`debounceMS`	`200`	number	The number of milliseconds to wait after typing is complete to refresh the results list.	Web, React Native
`minCharacters`	`3`	number	The minimum number of characters that need to be typed before fetching results.	Web, React Native
`limit`	`8`	number	The maximum number of results to show in the results list.	Web, React Native
`onSelection`	`null`	function `(address) => {}`	A function called when a result is selected from the results list.	Web, React Native
`onResults`	`null`	function `(addresses) => {}`	A function called when the results list is refreshed.	Web, React Native
`onError`	`null`	function `(error) => {}`	A function called if any errors occur.	Web, React Native
`placeholder`	`Search address`	string	The placeholder string for the input.	Web, React Native
`responsive`	`true`	boolean	A boolean that indicates whether the input should expand to fill the parent container. If `responsive = true` and a `width` is specified, `width` will be treated as a `max-width`.	Web
`disabled`	`false`	boolean	A boolean that indicates whether the input should be disabled.	Web, React Native
`layers`	`null`	array	Optional layer filters. An array including one or more of `place`, `address`, `intersection`, `street`, `neighborhood`, `postalCode`, `locality`, `county`, `state`, `country`, `coarse`, and `fine`. See the autocomplete API documentation for more info.	Web, React Native
`countryCode`	`null`	string	An optional 2-letter ISO 3166 country code. If set, results will only be fetched from the specified country.	Web, React Native
`expandUnits`	`false`	boolean	A boolean that indicates whether to include unit numbers in the results.	Web
`showMarkers`	`true`	boolean	A boolean that indicates whether to show marker icons in the results list.	Web, React Native
`markerColor`	`#acbdc8`	string	The CSS color of marker icons in the results list.	Web
`style`	`null`	React Native style object	Styles for the element. See the code for more info.	React Native

Quickstart#

First, sign up for Radar and get an API key.

Then, get started with the sample code below.

JavaScript#

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />    <link href="https://js.radar.com/v4.4.2/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.4.2/radar.min.js"></script>  </head>
  <body>    <div id="autocomplete" />
    <script type="text/javascript">      Radar.initialize('prj_live_pk_...');
      Radar.ui.autocomplete({        container: 'autocomplete',        width: '600px',        onSelection: (address) => {          // do something with selected address        },      });    </script>  </body></html>

React#

import React, { useEffect, useRef } from 'react';import Radar from 'radar-sdk-js';import 'radar-sdk-js/dist/radar.css';
const RadarAutocomplete = () => {  const autocompleteRef = useRef(null);
  useEffect(() => {      Radar.initialize('prj_live_pk_...');
      autocompleteRef.current = Radar.ui.autocomplete({        container: 'autocomplete',        width: '600px',        onSelection: (address) => {          // Do something with the selected address          console.log(address);        },      });
    return () => {        autocompleteRef.current?.remove();    };  }, []);
  return (    <div id="autocomplete" />  );};
export default RadarAutocomplete;

React Native#

import { View } from 'react-native';import { useState, useEffect } from 'react';import Radar, { Autocomplete } from 'react-native-radar';
Radar.initialize('prj_live_pk_...');
export const App = () => (  <View>    <Autocomplete options={      onSelection: (address) => {        // do something with selected address      },    } />  </View>);

Examples#

Use Autocomplete with Radar Maps in React#

Below is an example of how you can use Radar Maps with Radar Autocomplete in React.

import React, { useEffect, useRef } from 'react';import Radar from 'radar-sdk-js';import 'radar-sdk-js/dist/radar.css';
const RadarMap = () => {  const radarInitialized = useRef(false);  const mapRef = useRef(null);  const markerRef = useRef(null);  const autocompleteRef = useRef(null);
  useEffect(() => {    Radar.initialize('prj_live_pk_...');
    // Create a map    const map = Radar.ui.map({      container: 'map',      style: 'radar-default-v1',      center: [-73.9911, 40.7342], // NYC      zoom: 14,    });    mapRef.current = map;
    // Add a marker to the map    const marker = Radar.ui.marker({ text: 'Radar HQ' })      .setLngLat([-73.9910078, 40.7342465]) // default example.      .addTo(map);    markerRef.current = marker;
    // Initialize Radar autocomplete    autocompleteRef.current = Radar.ui.autocomplete({      container: 'autocomplete',      width: '400px',      onSelection: (address) => {        const { latitude, longitude } = address;        console.log('Selected address:', address);
        // Update marker position        markerRef.current.setLngLat([longitude, latitude]);
        // Center the map on the selected address        mapRef.current.flyTo({ center: [longitude, latitude], zoom: 14 });      },    });    return () => {        autocompleteRef.current?.remove();    };  }, []);
  return (    <div style={{ display: 'flex', height: '100vh' }}>      <div id="autocomplete" style={{ width: '400px', padding: '10px' }} />      <div id="map" style={{ flex: 1 }} />    </div>  );};
export default RadarMap;