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, 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 |
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/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;