> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/ja/llms.txt)
# Web Quickstart
# Address Autofill - Web Quickstart
**Address Autofill** is a Mapbox Search JS feature that makes filling out postal addresses on web forms faster, easier, and more accurate. It presents the user with suggested address matches after they begin typing in your form. Users can click a suggested address and instantly fill in the remaining inputs (city, state, postal code, etc).
Address autofill allows users to enter their information with fewer keystrokes and provide more accurate information.
This Quickstart Guide will help you get started with Address Autofill using [Mapbox Search JS Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/#search-js-web).
To use Address Autofill in a React app, see the [Address Autofill React Quickstart](https://docs.mapbox.com/mapbox-search-js/ja/guides/autofill/react/).
## Prerequisites
To use Mapbox Search JS, you need to have a Mapbox [access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/).
### Your default public token
You can use your *default public token* to get started with the code snippets in this guide.
To get your default public token, login to [account.mapbox.com](https://account.mapbox.com) and scroll down to the **Access Tokens** section.
This access token associates your search requests with a Mapbox account for billing. For more information on creating and using access tokens, see our [token management documentation](https://docs.mapbox.com/accounts/guides/tokens/).
## Installation
There are two ways to include Mapbox Search JS depending on your web project's architecture. You can use the Mapbox CDN to quickly add Mapbox Search JS to any web page with a `
```
This script will give you access to Mapbox Search JS Web classes ([`MapboxAddressAutofill`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/autofill/#mapboxaddressautofill),[`MapboxSearchBox`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/search/#mapboxsearchbox) [`MapboxGeocoder`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/geocoding/#mapboxgeocoder), etc ) as well as the `mapboxsearch` global object.
### Installation when using a Module Bundler
Install the NPM package.
```bash
npm install --save @mapbox/search-js-web
```
There is no `default` export for `@mapbox/search-js-web`, you must use named exports.
```js
import { MapboxAddressAutofill, MapboxSearchBox, MapboxGeocoder, config } from '@mapbox/search-js-web'
```
## Using Address Autofill
There are three ways to add Address Autofill to your forms:
- **The [`autofill()`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/autofill/#autofill) function** (recommended for most pages) — discovers eligible inputs across your page and attaches autofill automatically. One line of setup; works with any form that has proper HTML [`autocomplete` attributes](#autocomplete-attributes).
- **The `` HTML custom element** — declarative; wrap your `` elements in HTML markup with no JavaScript required. Useful when you want explicit, individual form control without writing JS.
- **The `MapboxAddressAutofill` class** — for fine-grained imperative control. Use when you need to attach autofill to specific inputs from JavaScript, configure multiple inputs with different options, or work with inputs that don't follow the discovery convention.
### Automatic attachment with `autofill()`
The [`autofill()`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/autofill/#autofill) function automatically attaches to eligible `` elements and is the easiest and fastest way to add address autofill to your website.
Eligible inputs must be a descendant of a `
```
**Module Bundler**
```javascript
import { autofill, config } from '@mapbox/search-js-web'
config.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'
autofill({
options: {
country: 'us'
}
})
```
**CDN**
```html
```
> **Related content (example): [Autofill suggestions example](https://docs.mapbox.com/mapbox-search-js/ja/example/simple-autofill/)**
>
> This example uses the `autofill()` function to automatically add suggestions to an address input.
### Declarative attachment with ``
The `` HTML custom element wraps your `` elements directly in markup, with configuration set via HTML attributes — no JavaScript setup required. This is the simplest path when you want explicit, individual form control and your page is server-rendered or otherwise written as HTML.
`` must be a descendant of a `
```
In the above example, the custom element has its `access-token`, `theme`, and `popover-options` attributes set.
> **Related content (example): [Autofill suggestions (custom elements) example](https://docs.mapbox.com/mapbox-search-js/ja/example/simple-autofill-custom-elements/)**
>
> Try the full Address Autofill workflow on a working address form using the HTML custom element.
### Using the `MapboxAddressAutofill` class
`MapboxAddressAutofill` is a JavaScript class. Instantiating it produces a DOM element that you place inside a `
```
**Module Bundler**
```javascript
import { MapboxAddressAutofill } from '@mapbox/search-js-web'
// instantiate a new MapboxAddressAutofill
const autofillElement = new MapboxAddressAutofill()
autofillElement.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'
// set the autofill options
autofillElement.options = {
country: 'us'
}
const addressInput = document.getElementById('address-input');
const addressForm = addressInput.parentElement;
// wrap the with the MapboxAddressAutofill instance
autofillElement.appendChild(addressInput);
// append the MapboxAddressAutofill instance to the