<div id="app">
	<form>
		<label for="address1">Address</label><br /><input v-model="address1" name="address" placeholder="Address 1" autocomplete="address-line1"><br />
		<label for="apartment">Address Line 2</label><br /><input v-model="address2" name="apartment" placeholder="Apartment" autocomplete="address-line2"><br />
		<label for="city">City</label><br /><input v-model="city" name="city" placeholder="City" autocomplete="address-level2"><br />
		<label for="state">State</label><br /><input v-model="state" name="state" placeholder="State" autocomplete="address-level1"><br />
		<label for="postal-code">Zip</label><br /><input v-model="zip" name="postal-code" placeholder="Zip" autocomplete="postal-code">
	</form>
</div>
input{width:30%;}
const { createApp } = Vue

createApp({
	data() {
		return {
			address1: null,
			address2: null,
			city: null,
			state: null,
			zip: null
		}
	}
}).mount('#app')

mapboxsearch.autofill({
	accessToken: 'pk.eyJ1Ijoic3RlaW5icmluZyIsImEiOiJja2t1YjE3ZXEwZ3R0MnBqdWo2cHRkOW5sIn0.OEPMk0xJ6j2zIq1zZN9yMg',
	options: { 
		country: 'us', 
		limit: 5,
    types: 'address',
    proximity: 'ip',
    autocomplete: true,
    fuzzyMatch: true,
    language: 'en' }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js
  2. https://api.mapbox.com/search-js/v1.0.0-beta.14/web.js