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.1.18/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.1.18/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 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>);