Pro6PP Infer JS SDK

The official Vanilla JS SDK for the Pro6PP Infer API.
A library that adds address autocompletion to any HTML input field.

Installation

#### Option 1: CDN

Add this script to your HTML file. It exposes a global Pro6PP variable.

``html

`

#### Option 2: NPM

If you are using a build tool like Webpack or Vite, but not a framework like React.

`bash
npm install @pro6pp/infer-js
`

> Note: If you are using React, use @pro6pp/infer-react instead.

#### Option 3: Direct download

You can also download the latest index.global.js and place it in your project.

Usage

#### Option 1: CDN

1. Add the script to your page.
2. Create an input field.
3. Attach the core logic to that input using Pro6PP.attach().

`html
Address:





`

#### Option 2: NPM

1. Create an input field.
2. Import the attach function.
3. Initialize the autocomplete on the input.

`html

`

`javascript
import { attach } from '@pro6pp/infer-js';

const inputElement = document.getElementById('address-input');

attach(inputElement, {
authKey: 'YOUR_AUTH_KEY',
country: 'NL',
// triggered whenever the internal state changes
onStateChange: function (state) {
console.log('Current State:', state);
},
// triggered when the user selects a final address
onSelect: function (result) {
console.log('Selected Address:', result);
},
});
`

#### Option 3: Direct download

1. Download the latest index.global.js.
2. Place it in your project and include it directly in your HTML.

`html


`

Styling

By default, the SDK injects the necessary CSS for the dropdown. If you want to control the styling with your own styles, set style: 'none' in the config:

`js
attach(inputElement, {
authKey: '...',
country: 'NL',
style: 'none', // disables default styles
});
`

You can then target the following classes in your CSS:

| Class | Description |
| :----------------------- | :-------------------------------------------------------- |
| .pro6pp-wrapper | The container element wrapping the input and dropdown. |
| .pro6pp-input | The input element itself. |
| .pro6pp-dropdown | The

list containing the suggestions. |
| .pro6pp-item | A single suggestion item (
• ). |
| .pro6pp-item--active | The currently highlighted item (for keyboard navigation). |
| .pro6pp-item__label | The main text/label of a suggestion. |
| .pro6pp-item__subtitle | The secondary text (e.g., city or result count). |
| .pro6pp-item__chevron | The icon indicating a folder/expandable result. |
| .pro6pp-no-results | The message shown when no suggestions are found. |
| .pro6pp-loader-item | The list item containing the loading spinner and text. |
| .pro6pp-mini-spinner` | The spinner icon inside the loader item. |