Address

NZ address autocomplete (LINZ + OpenStreetMap) with overseas manual-entry fallback. Proxies API keys server-side for security.

NZ Address (Autocomplete)

Start typing an NZ address below. The component queries a server-side proxy that blends LINZ street addresses and OpenStreetMap POIs (or returns mock data when no API key is configured).

NZ Address

Overseas Address

Address

Address line 1

Address line 2

City

State/Region

Postal code

Country

Overseas Address (Manual)

NZ Address

Overseas Address

Address

Address line 1

Address line 2

City

State/Region

Postal code

Country

Interact with an address field to see output...

// NZ address with autocomplete
<?= $m->address('deliveryAddress')
    ->suggestUrl('/addressSuggest')
    ->mode('nz') ?>

// Overseas manual input
<?= $m->address('intlAddress')
    ->mode('overseas') ?>

// Custom name prefix for form fields
<?= $m->address('billing')
    ->namePrefix('billing_address')
    ->suggestUrl('/addressSuggest')
    ->mode('nz') ?>

// Get address instance
var addr = m.address('deliveryAddress');

// Switch mode
addr.setMode('overseas');
addr.setMode('nz');

// Clear all fields
addr.clear();

// Listen for address selection
document.getElementById('deliveryAddress')
    .addEventListener('m:address:select', function(e) {
        console.log('Selected:', e.detail);
    });

// Listen for mode changes
document.getElementById('deliveryAddress')
    .addEventListener('m:address:mode', function(e) {
        console.log('Mode:', e.detail.mode);
    });

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->address($id)`	`string`	Create an address component.
`->suggestUrl($url)`	`string`	Server-side proxy URL for address suggestions.
`->mode($mode)`	`string`	Initial mode: `nz` (autocomplete) or `overseas` (manual).
`->namePrefix($prefix)`	`string`	Prefix for hidden field names (default: component ID).

JS JS Methods

Method / Property	Parameters	Description
`m.address(id, opts)`	`string, ?object`	Get or create address instance.
`setMode(mode)`	`string`	Switch between `nz` and `overseas`.
`clear()`		Clear all address fields.

JS JS Options

Method / Property	Parameters	Description
`minChars`	`int`	Minimum characters before triggering autocomplete (default: 3).
`debounceMs`	`int`	Debounce delay in milliseconds (default: 250).
`suggestUrl`	`string`	Override the proxy URL for address suggestions.
`onChange`	`function(data)`	Called when an address is selected or mode changes.

EVENT Events

Event Name	Detail	Description
`m:address:mode`	`{mode}`	Fired when the address mode changes between NZ and overseas.
`m:address:select`	`{suggestion, ...fields}`	Fired when an NZ address suggestion is selected.