Skip to main content
Use Radar’s autocomplete component to add address autocomplete to your websites and apps with just a few lines of code. You can 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:
NameDefaultPossible valuesDescriptionSDK availability
containerautocompletestring | HTMLElementThe 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
width400number | stringThe width of the input, a number (in pixels) or any valid CSS width.Web
maxHeightnullnumber | stringThe max height of the results list, a number (in pixels) or any valid CSS height.Web
nearnullstring | LocationThe 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
debounceMS200numberThe number of milliseconds to wait after typing is complete to refresh the results list.Web, React Native
minCharacters3numberThe minimum number of characters that need to be typed before fetching results.Web, React Native
limit8numberThe maximum number of results to show in the results list.Web, React Native
onSelectionnullfunction (address) => {}A function called when a result is selected from the results list.Web, React Native
onResultsnullfunction (addresses) => {}A function called when the results list is refreshed.Web, React Native
onErrornullfunction (error) => {}A function called if any errors occur.Web, React Native
placeholderSearch addressstringThe placeholder string for the input.Web, React Native
responsivetruebooleanA 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
disabledfalsebooleanA boolean that indicates whether the input should be disabled.Web, React Native
layersnullarrayOptional layer filters. An array including one or more of place, address, street, neighborhood, postalCode, locality, county, state, country, coarse, and fine. See the autocomplete API documentation for more info.Web, React Native
countryCodenullstringAn optional 2-letter ISO 3166 country code. If set, results will only be fetched from the specified country.Web, React Native
showMarkerstruebooleanA boolean that indicates whether to show marker icons in the results list.Web, React Native
markerColor#acbdc8stringThe CSS color of marker icons in the results list.Web
stylenullReact Native style objectStyles 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/autocomplete/v1.0.0/radar-autocomplete.css" rel="stylesheet">
    <script src="https://js.radar.com/v5.0.0/radar.min.js"></script>
    <script src="https://js.radar.com/autocomplete/v1.0.0/radar-autocomplete.min.js"></script>
  </head>

  <body>
    <div id="autocomplete"></div>

    <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 { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';
import '@radarlabs/plugin-autocomplete/dist/radar-autocomplete.css';

Radar.registerPlugin(createAutocompletePlugin());

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 { createMapsPlugin } from '@radarlabs/plugin-maps';
import { createAutocompletePlugin } from '@radarlabs/plugin-autocomplete';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
import '@radarlabs/plugin-autocomplete/dist/radar-autocomplete.css';

Radar.registerPlugin(createMapsPlugin());
Radar.registerPlugin(createAutocompletePlugin());

const RadarMap = () => {
  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({ popup: { text: 'Radar HQ' } })
      .setLngLat([-73.9910078, 40.7342465])
      .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;