# getaddress-autocomplete-native

> GetAddress.io - Native Autocomplete Plug-In

Latest version **2.2.1** (published 2025-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install getaddress-autocomplete-native
pnpm add getaddress-autocomplete-native
yarn add getaddress-autocomplete-native
bun add getaddress-autocomplete-native
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2025-01-18 |
| First published | 2022-03-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 36.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | getAddress |
| Maintainers | getaddress |
| Keywords | postcode, getAddress, address, plugin, UK, autocomplete, datalist |

## Links

- npm: https://www.npmjs.com/package/getaddress-autocomplete-native
- Repository: https://github.com/getAddress/autocomplete-native
- Homepage: https://getaddress.io
- Issues: https://github.com/getAddress/autocomplete-native/issues
- npm.io page: https://npm.io/package/getaddress-autocomplete-native

## Dependencies (2)

- [getaddress-api](https://npm.io/package/getaddress-api.md) ^2.1.0
- [getaddress-autocomplete-modal](https://npm.io/package/getaddress-autocomplete-modal.md) ^1.1.1

## Recent versions

- 2.2.1 (latest) — 2025-01-18
- 2.2.0 — 2025-01-18
- 2.1.0 — 2024-12-22
- 2.0.2 — 2024-10-10
- 2.0.1 — 2024-10-10
- 2.0.0 — 2024-10-08
- 1.1.1 — 2024-05-13
- 1.1.0 — 2024-04-15
- 1.0.3 — 2022-11-29
- 1.0.2 — 2022-07-14
- 1.0.1 — 2022-03-16
- 1.0.0 — 2022-03-15

## README

Javascript - Native Autocomplete.

## Install

###  From NPM
```
npm install getaddress-autocomplete-native
```
### Or CDN
```
<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-native-2.0.2.min.js"></script>
```

## Usage
```

  <label>Address Line 1</label>
  <div><input id="line1" type="text"></div>

  <label>Address Line 2</label>
  <div><input id="line2" type="text"></div>

  <label>Address Line 3</label>
  <div><input id="line3" type="text"></div>

  <label>Address Line 4</label>
  <div><input id="line4" type="text"></div>

  <label>Address Line 5</label>
  <div><input id="line5" type="text"></div>

  <label>Postcode</label>
  <div><input id="postcode" type="text"></div>
  
  <script>
    const autocomplete = getAddress.autocomplete("line1","API Key");
    
    autocomplete.addEventListener("getaddress-autocomplete-address-selected", function(e){
      document.getElementById('line1').value = e.address.formatted_address[0];
      document.getElementById('line2').value = e.address.formatted_address[1];
      document.getElementById('line3').value = e.address.formatted_address[2];
      document.getElementById('line4').value = e.address.formatted_address[3];
      document.getElementById('line5').value = e.address.formatted_address[4];
      document.getElementById('postcode').value = e.address.postcode;
    })
  </script>
```
## Options
The full list of options, and their defaults:
```
getAddress.autocomplete(
        'textbox_id',
        'API_KEY',
        /*options*/{
          id_prefix:'getAddress-autocomplete-native' ,  /* The id of the textbox and list container */
          delay:100, /* millisecond delay between keypress and API call */
          minimum_characters:2,  /* minimum characters to initiate an API call */
          select_on_focus:true,  /* if true, highlights textbox characters on focus*/
          alt_autocomplete_url:undefined,  /* alterative local autocomplete URL (when API key is not used) */
          alt_get_url:undefined,  /* alterative local get URL (when API key is not used) */
          suggestion_count:6, /* number of retreived suggestions  */
          filter:undefined, /* the suggestion filter (see Autocomplete API)*/
          input_focus_on_select:true,  /* if true, sets the focus to the textbox after selecting an address*/
          debug:false, /* if true, logs behavior */
          enable_get:true, /* if true, retreives address on select */,
          full_screen_on_mobile:true, /* if true, opens full screen on mobile devices*/;
          max_mobile_screen_width:500, /* max mobile screen width*/;
          full_screen_options:undefined, /* full screen display options*/
          show_postcode:false /* always display postcode in suggestions*/
        }
    );
```
## Events
```
document.addEventListener("getaddress-autocomplete-suggestions", function(e){
    console.log(e.suggestions);
})

document.addEventListener("getaddress-autocomplete-suggestions-failed", function(e){
    console.log(e.status);
    console.log(e.message);
})

document.addEventListener("getaddress-autocomplete-address-selected", function(e){
    console.log(e.address);
})

document.addEventListener("getaddress-autocomplete-find-selected-failed", function(e){
    console.log(e.status);
    console.log(e.message);
})
```

---
_Source: https://npm.io/package/getaddress-autocomplete-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._