> ## Documentation Index
> Fetch the complete documentation index at: https://radarlabs-jasonliu-test.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Autocomplete

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](https://dashboard.radar.com/maps/maps-explorer/autocomplete) in the dashboard, or check out a full-page [maps demo](https://radar.com/demo/maps) and [store locator demo](https://radar.com/demo/locator) 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](/api#ip-geocode).                                                               | 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](/api#autocomplete) for more info. | Web, React Native |
| `countryCode`   | `null`           | string                       | An optional 2-letter [ISO 3166](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes) 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](https://github.com/radarlabs/react-native-radar/blob/master/js/ui/autocomplete.jsx) for more info.                                                                                                                                        | React Native      |

## Quickstart

First, [sign up](https://radar.com/signup) for Radar and get an API key.

Then, get started with the sample code below.

### JavaScript

```javascript theme={null}
<!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.5.3/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.5.3/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

```javascript theme={null}
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

```javascript theme={null}
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](/maps/maps) with Radar Autocomplete in React.

```javascript theme={null}
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;
```