Infer JavaScript SDK verwenden

Usage

Option 1: CDN

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

HTML

<label>Address:</label>
<input id="address-input" type="text" />

<!-- Inject the CDN -->
<script src="https://unpkg.com/@pro6pp/infer-js"></script>
<script>
  Pro6PP.attach('#address-input', {
    authKey: 'YOUR_AUTH_KEY',
    country: 'NL',
    onSelect: function (result) {
      console.log('Selected Address:', result);
    },
  });
</script>

Place suggestions are opt-in. Pass types: 'place' or types: 'address,place' and handle the selected place with onPlaceSelect. The selected place is available as instance.place, and an existing PlaceValue can be selected programmatically with instance.setPlace(place). Omitting types keeps address-only behavior. Use Pro6PP.supportsInferPlaces(country) or Pro6PP.INFER_PLACES_COUNTRIES to check country support. PlaceValue includes the place ID, name, category, address fields, and coordinates.

JavaScript

const instance = Pro6PP.attach('#address-input', {
  authKey: 'YOUR_AUTH_KEY',
  country: 'NL',
  types: 'address,place',
  onPlaceSelect: (place) => console.log('Selected place:', place),
});

Option 2: NPM

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

HTML

<input id="address-input" name="address" />

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

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

HTML

<input id="my-input" type="text" />

<script src="path/to/index.global.js"></script>
<script>
  const instance = Pro6PP.attach('#my-input', {
    authKey: 'YOUR_AUTH_KEY',
    country: 'NL',
  });
</script>

Styling

By default, the SDK injects the necessary CSS for the dropdown. You have several options for styling:

Note: the JavaScript bundle still contains the default CSS as a fallback. Importing @pro6pp/infer-js/styles.css with style: 'none' disables runtime style injection, but does not provide a CSS-free JS bundle.

Option 1: Use auto-injected styles (default)

No extra setup needed. The CSS is embedded in the JS bundle and injected automatically.

Option 2: Import CSS separately

If you prefer to load the CSS as a separate file:

JavaScript

import { attach } from '@pro6pp/infer-js';
import '@pro6pp/infer-js/styles.css';

attach(inputElement, {
  authKey: '...',
  country: 'NL',
  style: 'none', // disable auto-injection since we imported CSS separately
});

Option 3: CDN with separate CSS

HTML

<link rel="stylesheet" href="https://unpkg.com/@pro6pp/infer-js/dist/styles.css" />
<script src="https://unpkg.com/@pro6pp/infer-js"></script>
<script>
  Pro6PP.attach('#address-input', {
    authKey: 'YOUR_AUTH_KEY',
    country: 'NL',
    style: 'none', // disable auto-injection since we linked CSS separately
  });
</script>

Option 4: Fully custom styles

If you want to control the styling entirely with your own CSS:

JavaScript

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

You can then target the following classes in your CSS:

Klasse	Beschreibung
.pro6pp-wrapper	The container element wrapping the input and dropdown.
.pro6pp-input	The input element itself.
.pro6pp-input-addons	The container for the controls inside the input, such as the clear button.
.pro6pp-clear-button	The button that clears the input.
.pro6pp-dropdown	The panel containing the suggestion list and the loader.
.pro6pp-list	The `<ul>` list containing the suggestions.
.pro6pp-item	A single suggestion item (`<li>`).
.pro6pp-item--active	The currently highlighted item (for keyboard navigation).
.pro6pp-item__label	The main text/label of a suggestion.
.pro6pp-item--place	An item for a point of interest rather than an address.
.pro6pp-item__label--match	The part of a label that matches the query.
.pro6pp-item--fuzzy	An item for a close match rather than an exact one.
.pro6pp-item__label--unmatched	The rest of the label.
.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 while searching or when no suggestions are found.
.pro6pp-loader-item	The element containing the loading spinner and text.
.pro6pp-mini-spinner	The spinner icon inside the loader item.