> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/ja/llms.txt)

# Address Autofill

**Address Autofill** provides a rich UI for address search and autocomplete functionality for address forms in websites and web apps.

This page includes reference documentation for elements, functions, and types related to Address Autofill and Address Confirmation features of the **Mapbox Search JS Web** framework.

For installation instructions and a helpful introduction to using Address Autofill in your website or app, see our [Web Address Autofill Quickstart Guide](https://docs.mapbox.com/mapbox-search-js/ja/guides/autofill/web).

## Automatic Attachment with autofill()

### autofill

Entry point for Mapbox Address Autofill, for use on standard HTML input elements.

Compared to [MapboxAddressAutofill](#mapboxaddressautofill), this function automatically attaches to eligible [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) elements in-place.

You must have a [Mapbox access token](https://www.mapbox.com/help/create-api-access-token/).

Eligible inputs must be a descendant of a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element, and the form must have inputs with proper HTML `autocomplete` attributes. The input itself must be of autocomplete `"street-address"` or `"address-line1""`.

If your application works with browser autofill, you may already have this functionality.

-   [The HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
-   [Autofill](https://web.dev/learn/forms/autofill/)

#### Parameters

| Name | Description |
| --- | --- |
| **optionsArg** [AddressAutofillCollectionOptions](#addressautofillcollectionoptions)  | [AddressAutofillCollectionOptions](#addressautofillcollectionoptions) Object defining options for Address Autofill search behavior and UI. |

#### Returns

AddressAutofillCollectionType

#### Import[​](#import)

```javascript
import { autofill } from '@mapbox/search-js-web'
```

#### Example

```js
<input type="text" autocomplete="street-address" />
<script>
mapboxsearch.autofill({
  accessToken: 'pk.my.token',
  options: { country: 'us' }
};
</script>
```

```js
const collection = autofill({
  accessToken: 'pk.my.token',
  options
})

myClientSideRouter.on('route', () => collection.update());
```

このsection on autofillは役に立ちましたか？[Yes](null)[No](null)

### AddressAutofillCollection

Underlying collection object class returned by the [autofill](#autofill) function.

> new AddressAutofillCollection()

#### Import[​](#import)

```javascript
import { AddressAutofillCollection } from '@mapbox/search-js-web'
```

#### Instance Members

##### accessToken

The [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) to use for all requests.

###### Type

[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)

###### Returns

[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)

###### Example

```js
autofill.accessToken = 'pk.my-mapbox-access-token';
```

##### options

Options to pass to the underlying [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) interface.

###### Type

Partial<[AddressAutofillOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofilloptions)>

###### Returns

Partial<[AddressAutofillOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofilloptions)>

###### Example

```js
autofill.options = {
 language: 'en',
 country: 'US',
};
```

##### theme

The [Theme](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/theming/#theme) to use for styling the autofill component.

`theme.cssText` selectors may target the suggestions dropdown (`.MapboxSearch`, `.Label`, `.Results`, `.ResultsList`, `.ResultsAttribution`, `.Suggestion`, `.SuggestionIcon`, `.SuggestionText`, `.SuggestionName`, `.SuggestionDesc`). This theme is not applied to the input element — that's the consumer's own `<input>` — and it does not reach the address confirmation dialog shown by `confirmOnBrowserAutofill`; theme that separately via [AddressConfirmOptions](#addressconfirmoptions).

###### Type

[Theme](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/theming/#theme)

###### Returns

[Theme](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/theming/#theme)

###### Example

```js
autofill.theme = {
  variables: {
    colorPrimary: 'myBrandRed'
  },
  cssText: ".Results { background-color: lightskyblue; }"
};
```

##### popoverOptions

The [PopoverOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/properties/#popoveroptions) to define popover positioning.

###### Type

Partial<[PopoverOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/properties/#popoveroptions)>

###### Returns

Partial<[PopoverOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/properties/#popoveroptions)>

###### Example

```js
autofill.popoverOptions = {
  placement: 'top-start',
  flip: true,
  offset: 5
};
```

##### confirmOnBrowserAutofill

If true, forms autofilled by the browser will prompt the [confirmAddress](#confirmaddress) dialog for user confirmation. An [AddressConfirmOptions](#addressconfirmoptions) object can also be passed to prompt [confirmAddress](#confirmaddress) with custom options. Defaults to false.

###### Type

([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) \| [AddressConfirmOptions](#addressconfirmoptions))

###### Example

```js
autofill.confirmOnBrowserAutofill = {
  minimap: true,
  skipConfirmModal: (feature) =>
    ['exact', 'high'].includes(
      feature.properties.match_code.confidence
    )
};
```

##### browserAutofillEnabled

Enables the browser's autocomplete popup to show during the first two typed characters while Mapbox results are suppressed. Defaults to false.

**Note:** Due to varying specifications, efforts to suppress browser autocomplete behavior may not work on all browsers.

###### Type

[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)

###### Example

```js
autofill.browserAutofillEnabled = true;
```

### Methods

##### update()

Updates autofill collection based on the current DOM state.

###### Returns

void

#### Import[​](#import)

```javascript
import { update } from '@mapbox/search-js-web'
```

###### Example

```js
collection.update();
```

##### observe()

Listen for changes to the DOM, and update autofill instances when autofill-able inputs are added/removed.

**IMPORTANT:** For performance reasons, it is recommended to carefully control when this is called and to call [AddressAutofillCollection#unobserve](#addressautofillcollection#unobserve) when finished.

###### Returns

void

#### Import[​](#import)

```javascript
import { observe } from '@mapbox/search-js-web'
```

###### Example

```js
collection.observe();
```

##### unobserve()

Stop listening for changes to the DOM. This only has an effect if called after [AddressAutofillCollection#observe](#addressautofillcollection#observe).

###### Returns

void

#### Import[​](#import)

```javascript
import { unobserve } from '@mapbox/search-js-web'
```

###### Example

```js
collection.unobserve();
```

##### remove()

Removes all autofill instances and listeners in the document.

###### Returns

void

#### Import[​](#import)

```javascript
import { remove } from '@mapbox/search-js-web'
```

###### Example

```js
collection.remove();
```

#### Events

##### suggest

Fired when the user is typing in the input and provides a list of suggestions.

The underlying response from [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) is passed as the event's detail, while the responsible input is passed as the event's target.

###### Type

[AddressAutofillSuggestionResponse](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillsuggestionresponse)

###### Example

```js
collection.addEventListener('suggest', (event) => {
  const suggestions = event.detail.suggestions;
  const inputEl = event.target;
  // ...
});
```

##### suggesterror

Fired when [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) has errored providing a list of suggestions.

The underlying error is passed as the event's detail, while the responsible input is passed as the event's target.

###### Type

[Error](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error)

###### Example

```js
collection.addEventListener('suggesterror', (event) => {
  const error = event.detail;
  const inputEl = event.target;
  // ...
});
```

##### retrieve

Fired when the user has selected a suggestion, before the form is autofilled.

The underlying response from [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) is passed as the event's detail, while the responsible input is passed as the event's target.

###### Type

[AddressAutofillRetrieveResponse](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillretrieveresponse)

###### Example

```js
autofill.addEventListener('retrieve', (event) => {
  const featureCollection = event.detail;
  const inputEl = event.target;
  // ...
});
```

このsection on AddressAutofillCollectionは役に立ちましたか？[Yes](null)[No](null)

## Class

### MapboxAddressAutofill

`MapboxAddressAutofill` is a class that wraps an address [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) element with intelligent, location-aware autocomplete functionality.

Instantiating it produces a DOM element that you place inside a `<form>` to wrap one or more `<input>` elements. `MapboxAddressAutofill` is also available as the `<mapbox-address-autofill>` HTML custom element for declarative usage.

To use this class, you must have a [Mapbox access token](https://www.mapbox.com/help/create-api-access-token/).

The autofill element must be a descendant of a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form), and the form must have inputs with proper HTML `autocomplete` attributes. If your application works with browser autofill, you may already have this functionality.

-   [The HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
-   [Autofill](https://web.dev/learn/forms/autofill/)

> new MapboxAddressAutofill()

#### Import[​](#import)

```javascript
import { MapboxAddressAutofill } from '@mapbox/search-js-web'
```

#### Example

```js
// Example: wrap an existing input via JavaScript
const autofillElement = new MapboxAddressAutofill();
autofillElement.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
autofillElement.options = { country: 'us' };

const addressInput = document.getElementById('address-input');
const addressForm = addressInput.parentElement;

// wrap the <input> with the MapboxAddressAutofill instance
autofillElement.appendChild(addressInput);
addressForm.appendChild(autofillElement);
```

```js
// Example: declarative usage with the HTML custom element
<form>
  <mapbox-address-autofill access-token="YOUR_MAPBOX_ACCESS_TOKEN">
    <input type="text" name="address" autocomplete="shipping street-address" />
  </mapbox-address-autofill>
</form>
```

#### Instance Members

##### input

The `<input>` element wrapped by the autofill component.

###### Type

[HTMLInputElement](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)

##### accessToken

The [Mapbox access token](https://docs.mapbox.com/help/glossary/access-token/) to use for all requests.

###### Example

```js
autofill.accessToken = 'pk.my-mapbox-access-token';
```

##### options

Options to pass to the underlying [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) interface.

###### Type

[AddressAutofillOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofilloptions)

###### Example

```js
autofill.options = {
 language: 'en',
 country: 'US',
};
```

##### theme

The [Theme](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/theming/#theme) to use for styling the autofill component.

`theme.cssText` selectors may target the suggestions dropdown (`.MapboxSearch`, `.Label`, `.Results`, `.ResultsList`, `.ResultsAttribution`, `.Suggestion`, `.SuggestionIcon`, `.SuggestionText`, `.SuggestionName`, `.SuggestionDesc`). This theme is not applied to the input element — that's the consumer's own `<input>` — and it does not reach the address confirmation dialog shown by `confirmOnBrowserAutofill`; theme that separately via [AddressConfirmOptions](#addressconfirmoptions).

###### Type

[Theme](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/theming/#theme)

###### Example

```js
autofill.theme = {
  variables: {
    colorPrimary: 'myBrandRed'
  },
  cssText: ".Results { background-color: lightskyblue; }"
};
```

##### popoverOptions

The [PopoverOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/properties/#popoveroptions) to define popover positioning.

###### Type

[PopoverOptions](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/properties/#popoveroptions)

###### Example

```js
autofill.popoverOptions = {
  placement: 'top-start',
  flip: true,
  offset: 5
};
```

##### confirmOnBrowserAutofill

If true, forms autofilled by the browser will prompt the [confirmAddress](#confirmaddress) dialog for user confirmation. An [AddressConfirmOptions](#addressconfirmoptions) object can also be passed to prompt [confirmAddress](#confirmaddress) with custom options. Defaults to false.

###### Type

([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) \| [AddressConfirmOptions](#addressconfirmoptions))

###### Example

```js
autofill.confirmOnBrowserAutofill = {
  minimap: true,
  skipConfirmModal: (feature) =>
    ['exact', 'high'].includes(
      feature.properties.match_code.confidence
    )
};
```

##### browserAutofillEnabled

Enables the browser's autocomplete popup to show during the first two typed characters while Mapbox results are suppressed. Defaults to false.

**Note:** Due to varying specifications, efforts to suppress browser autocomplete behavior may not work on all browsers.

###### Type

[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)

###### Example

```js
autofill.browserAutofillEnabled = true;
```

##### interceptSearch

A callback providing the opportunity to validate and/or manipulate the input text before it triggers a search, for example by using a regular expression. If a truthy string value is returned, it will be passed into the underlying search API. If `null`, `undefined` or empty string is returned, no search request will be performed.

###### Example

```js
Enable search only when the input value length is more than 3 characters.

search.interceptSearch = (val) => val?.length > 3 ? val : null;
```

### Methods

##### focus()

Focuses the wrapped input element.

###### Returns

void

#### Events

##### suggest

Fired when the user is typing in the input and provides a list of suggestions.

The underlying response from [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) is passed as the event's detail.

###### Type

[AddressAutofillSuggestionResponse](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillsuggestionresponse)

###### Example

```js
autofill.addEventListener('suggest', (event) => {
  const suggestions = event.detail.suggestions;
  // ...
});
```

##### suggesterror

Fired when [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) has errored providing a list of suggestions.

The underlying error is passed as the event's detail.

###### Type

[Error](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error)

###### Example

```js
autofill.addEventListener('suggesterror', (event) => {
  const error = event.detail;
  // ...
});
```

##### retrieve

Fired when the user has selected a suggestion, before the form is autofilled.

The underlying response from [AddressAutofillCore](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillcore) is passed as the event's detail.

###### Type

[AddressAutofillRetrieveResponse](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillretrieveresponse)

###### Example

```js
autofill.addEventListener('retrieve', (event) => {
  const featureCollection = event.detail;
  // ...
});
```

##### input

Fired when the user has changed the `<input>` text.

The new input value is passed as the event's detail.

###### Type

[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)

###### Example

```js
autofill.addEventListener('input', (event) => {
  if (e.target !== e.currentTarget) return;
  const searchText = event.detail;
  // ...
});
```

このsection on MapboxAddressAutofillは役に立ちましたか？[Yes](null)[No](null)

## Functions

### getFormAutofillValues

Gets the current input values for address fields given a form and a reference input.

#### Parameters

| Name | Description |
| --- | --- |
| **form** [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement)  | HTML form that includes the autocomplete-compliant input fields |
| **ref** [HTMLInputElement](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)  | An input element within the desired form address section |

#### Returns

[AutofillValueMap](#autofillvaluemap): A object mapping WHATWG autocomplete properties to their respective form field values

#### Import[​](#import)

```javascript
import { getFormAutofillValues } from '@mapbox/search-js-web'
```

#### Example

```js
const form = document.querySelector(form);
const input = form.querySelector('input[autocomplete~="street-address"]')
const valueMap = getFormAutofillValues(form, input);
console.log(valueMap);
// {
//   "street-address": "123 Main",
//   "address-level2": "Boston",
//   "address-level1": "MA",
//   "postal-code": "02129"
// }
```

このsection on getFormAutofillValuesは役に立ちましたか？[Yes](null)[No](null)

### getAutofillSearchText

Converts an [AutofillValueMap](#autofillvaluemap) to a single line, suitable for display in a text field.

#### Parameters

| Name | Description |
| --- | --- |
| **snapshot** [AutofillValueMap](#autofillvaluemap)  | An object mapping WHATWG autocomplete attribute values to their corresponding input field values |

#### Returns

[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String): A concatenated address string

#### Import[​](#import)

```javascript
import { getAutofillSearchText } from '@mapbox/search-js-web'
```

#### Example

```js
const values = {
  'street-address': '123 Main St',
  'address-level1': 'CA',
  'address-level2': 'San Francisco',
  'address-level3': '',
};

const searchText = getAutofillSearchText(values);
console.log(searchText); // '123 Main St, San Francisco, CA'
```

このsection on getAutofillSearchTextは役に立ちましたか？[Yes](null)[No](null)

### confirmAddress

A utility that can be run prior to form submission that allows a user to correct or confirm an address.

This parses and compares an address entered into form fields with the closest address suggestion from the Mapbox Address Autofill API. Unless an exact match or a custom comparison callback evaluates to true, the user will be shown a modal dialog asking if they would like to use the suggested address.

When a suggested address is accepted, the values are automatically updated in the form fields.

#### Parameters

| Name | Description |
| --- | --- |
| **form** [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement)  | HTML form that includes the autocomplete-compliant input fields |
| **optionsArg** [AddressConfirmOptions](#addressconfirmoptions) (default `{}`) | [AddressConfirmOptions](#addressconfirmoptions) Object defining options for Address Autofill API, UI, form parsing, and address comparison |

#### Returns

[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<[AddressConfirmShowResult](#addressconfirmshowresult)>: A promise resolving with a result object indicating the decision made by the user

#### Import[​](#import)

```javascript
import { confirmAddress } from '@mapbox/search-js-web'
```

#### Example

```js
form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const result = await confirmAddress(form, {
    minimap: true,
    skipConfirmModal: (feature) =>
      ['exact', 'high'].includes(
        feature.properties.match_code.confidence
      )
  });
  if (result.type === 'nochange') submitForm();
});
```

このsection on confirmAddressは役に立ちましたか？[Yes](null)[No](null)

## Options and Type Definitions

### AddressAutofillCollectionOptions

Object defining options for Address Autofill search behavior and UI. Used to configure [AddressAutofillCollection](#addressautofillcollection)

#### Type

[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

#### Properties

<table class="table table--fixed table--compact" style="width:100%;table-layout:fixed"><colgroup><col width="28%"><col></colgroup><thead><tr class="bg-gray-faint"><th style="border-top-left-radius:4px">Name</th><th style="border-top-right-radius:4px">Description</th></tr></thead><tbody><tr><td><strong>accessToken</strong>&nbsp;<span><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>&nbsp;</td><td><span>The <a href="https://docs.mapbox.com/help/glossary/access-token/">Mapbox access token</a> to use for all requests.</span></td></tr><tr><td><strong>browserAutofillEnabled</strong>&nbsp;<span><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;</td><td><span>Enables the browser's autocomplete popup to show during the first two typed characters while Mapbox results are suppressed. Defaults to false.<p><strong>Note:</strong> Due to varying specifications, efforts to suppress browser autocomplete behavior may not work on all browsers.</p></span></td></tr><tr><td><strong>confirmOnBrowserAutofill</strong>&nbsp;<span>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a> | <a href="#addressconfirmoptions">AddressConfirmOptions</a>)</span>&nbsp;</td><td><span>If true, forms autofilled by the browser will prompt the <a href="#confirmaddress">confirmAddress</a> dialog for user confirmation. An <a href="#addressconfirmoptions">AddressConfirmOptions</a> object can also be passed to prompt <a href="#confirmaddress">confirmAddress</a> with custom options. Defaults to false.</span></td></tr><tr><td><strong>options</strong>&nbsp;<span>Partial&lt;<a href="/mapbox-search-js/api/core/autofill/#addressautofilloptions">AddressAutofillOptions</a>&gt;</span>&nbsp;</td><td><span>Options to pass to the underlying <a href="/mapbox-search-js/api/core/autofill/#addressautofillcore">AddressAutofillCore</a> interface.</span></td></tr><tr><td><strong>popoverOptions</strong>&nbsp;<span>Partial&lt;<a href="/mapbox-search-js/api/web/properties/#popoveroptions">PopoverOptions</a>&gt;</span>&nbsp;</td><td><span>The <a href="/mapbox-search-js/api/web/properties/#popoveroptions">PopoverOptions</a> to define popover positioning.</span></td></tr><tr><td><strong>theme</strong>&nbsp;<span><a href="/mapbox-search-js/api/web/theming/#theme">Theme</a></span>&nbsp;</td><td><span>The <a href="/mapbox-search-js/api/web/theming/#theme">Theme</a> to use for styling the autofill component.</span></td></tr></tbody></table>

このsection on AddressAutofillCollectionOptionsは役に立ちましたか？[Yes](null)[No](null)

### AutofillValueMap

Object mapping WHATWG autocomplete attribute values to corresponding address component strings.

#### Type

any

#### Example

```js
{
  "street-address"?: string;
  "address-line1"?: string;
  "address-line2"?: string;
  "address-line3"?: string;
  "address-level4"?: string;
  "address-level3"?: string;
  "address-level2"?: string;
  "address-level1"?: string;
  country?: string;
  "country-name"?: string;
  "postal-code"?: string;
}
```

このsection on AutofillValueMapは役に立ちましたか？[Yes](null)[No](null)

### AddressConfirmOptions

Object defining options for Address Autofill API, UI, form parsing, and address comparison

#### Type

[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

#### Properties

| Name | Description |
| --- | --- |
| **accessToken** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)  | Mapbox access token used for the Address Autofill and Static Image APIs |
| **footer** ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) \| [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))  | Custom footer text appearing at the bottom of the confirmation modal dialog. If `true` or left undefined, the default footer text will be used. If `false` , the footer will not be shown. |
| **minimap** ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) \| [ConfirmationMinimapOptions](#confirmationminimapoptions))  | If true, a static minimap showing the suggested address location will be displayed in the modal dialog. If an object, a minimap will be displayed with the specified styling and theming configuration. Defaults to false. |
| **options** Partial<[ValidationOptions](#validationoptions)>  | Address Autofill API configuration options [ValidationOptions](#validationoptions) |
| **sections** [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>  | An array of section names used within form element `autocomplete` attributes to identify and group one address section from another, e.g. "section-shipping" or "section-billing". These are often used when a single contains multiple logical sections. If left undefined, all discoverable sections will be processed. |
| **skipConfirmModal** function (feature: [AddressAutofillFeatureSuggestion](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillfeaturesuggestion)): [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)  | A callback used to pre-confirm an address and skip the UI modal. The feature argument contains all address components, as well as an [MatchCode](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#matchcode) object, which are used to express the confidence of an address match. The callback must return a boolean, with `true` indicating that the address has been pre-confirmed, and the UI modal will be skipped and will not be presented to the end-user. If left undefined, this defaults to skipping showing the modal when the validated feature's match code returns an "exact" match. |
| **theme** [Theme](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/theming/#theme)  | CSS variables and icons for the confirmation dialog. `theme.cssText` selectors may target: `.Modal` , `.ModalHeader` , `.ModalHeaderTitle` , `.ModalFooter` , `.Icon` , `.IconQuestion` , `.IconClose` , `.ModalAddress` , `.ModalAddressApprove` , `.ModalMap` , `.Minimap` , `.ModalDescription` , `.ModalSubheader` , `.Button` , `.ButtonPrimary` , `.ButtonSecondary` , `.ButtonApprove` , `.ButtonReject` . To theme the embedded minimap itself, use the `minimap` option instead — see [ConfirmationMinimapOptions](#confirmationminimapoptions) . |

このsection on AddressConfirmOptionsは役に立ちましたか？[Yes](null)[No](null)

### ValidationOptions

#### Type

[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

#### Properties

<table class="table table--fixed table--compact" style="width:100%;table-layout:fixed"><colgroup><col width="28%"><col></colgroup><thead><tr class="bg-gray-faint"><th style="border-top-left-radius:4px">Name</th><th style="border-top-right-radius:4px">Description</th></tr></thead><tbody><tr><td><strong>bbox</strong>&nbsp;<span>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="/mapbox-search-js/api/core/geography/#lnglatboundslike">LngLatBoundsLike</a>)</span>&nbsp;</td><td><span>Limit results to only those contained within the supplied bounding box.</span></td></tr><tr><td><strong>country</strong>&nbsp;<span><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>&nbsp;</td><td><span>An <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">ISO 3166 alpha-2 country code</a> to be returned.<p>If not specified, results will not be filtered by country.</p></span></td></tr><tr><td><strong>language</strong>&nbsp;<span><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></span>&nbsp;</td><td><span>The <a href="https://en.wikipedia.org/wiki/IETF_language_tag">IETF language tag</a> to be returned.<p>If not specified, <code>en</code> will be used.</p></span></td></tr><tr><td><strong>proximity</strong>&nbsp;<span>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="/mapbox-search-js/api/core/geography/#lnglatlike">LngLatLike</a>)</span>&nbsp;</td><td><span>Bias the response to favor results that are closer to this location.<p>When both <a href="#validationoptions#proximity">ValidationOptions#proximity</a> and <a href="ValidationOptions#origin">ValidationOptions#origin</a> are specified, <code>origin</code> is interpreted as the target of a route, while <code>proximity</code> indicates the current user location.</p></span></td></tr></tbody></table>

このsection on ValidationOptionsは役に立ちましたか？[Yes](null)[No](null)

### ConfirmationMinimapOptions

Styling and theming options for a [MapboxAddressMinimap](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/minimap/#mapboxaddressminimap) embedded inside a confirmation dialog.

#### Type

Partial<Pick<[MapboxAddressMinimap](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/web/minimap/#mapboxaddressminimap), (`"defaultMapStyle"` \| `"theme"` \| `"mapStyleMode"` \| `"satelliteToggle"`)>>

#### Example

```js
const result = await confirmAddress(form, {
  accessToken: 'abc-123',
  minimap: {
    defaultMapStyle: ['mapbox', 'outdoors-v11'],
    theme: { icons: { marker: MARKER_SVG } },
    mapStyleMode: 'default',
    satelliteToggle: true
  }
});
```

このsection on ConfirmationMinimapOptionsは役に立ちましたか？[Yes](null)[No](null)

### AddressConfirmShowResult

Object indicating the decision made by the user during address confirmation when using [confirmAddress](#confirmaddress).

#### Type

({type: `"change"`, feature: [AddressAutofillFeatureSuggestion](https://docs.mapbox.com/mapbox-search-js/ja/mapbox-search-js/api/core/autofill/#addressautofillfeaturesuggestion)} \| {type: `"nochange"`} \| {type: `"cancel"`})

このsection on AddressConfirmShowResultは役に立ちましたか？[Yes](null)[No](null)