Address suggestions, free on every keystroke.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="robots" content="noindex" />
		<title>Address autocomplete with OpenGeocoding</title>
		<style>
			body {
				font:
					1rem/1.5 system-ui,
					sans-serif;
				max-width: 36rem;
				margin: 3rem auto;
				padding: 0 1rem;
			}
			input,
			button {
				font: inherit;
				padding: 0.75rem;
			}
			input {
				box-sizing: border-box;
				width: 100%;
			}
			ul {
				list-style: none;
				padding: 0;
				border: 1px solid;
			}
			button {
				width: 100%;
				text-align: left;
				border: 0;
				background: white;
				color: black;
				cursor: pointer;
			}
			button[aria-selected='true'] {
				background: #dbeafe;
			}
			output {
				display: block;
				white-space: pre-wrap;
				overflow-wrap: anywhere;
			}
		</style>
	</head>
	<body>
		<h1>Find an address</h1>
		<p>Suggestions use no credits. Selecting one retrieves its coordinates for one credit.</p>
		<label for="address">Address</label>
		<input
			id="address"
			role="combobox"
			aria-autocomplete="list"
			aria-expanded="false"
			aria-controls="suggestions"
			aria-describedby="status"
			autocomplete="off"
			spellcheck="false"
		/>
		<ul id="suggestions" role="listbox" aria-label="Address suggestions" hidden></ul>
		<p id="status" role="status">
			Type at least two characters. Use the arrow keys and Enter to select.
		</p>
		<output id="location" aria-label="Selected location"></output>
		<p>
			Data: <a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a> and
			other open-data contributors.
			<a href="https://opengeocoding.com/legal/attributions">Attributions and licences</a>.
		</p>
		<script type="module">
			const apiKey = 'og_YOUR_BROWSER_KEY';
			const input = document.querySelector('#address');
			const list = document.querySelector('#suggestions');
			const status = document.querySelector('#status');
			const output = document.querySelector('#location');
			let suggestions = [];
			let active = -1;
			let sequence = 0;
			let timer;
			let controller;
			let retryAt = 0;
			let retrieving = false;

			function cancel() {
				clearTimeout(timer);
				controller?.abort();
				retrieving = false;
				controller = new AbortController();
				return ++sequence;
			}

			function close() {
				suggestions = [];
				active = -1;
				list.replaceChildren();
				list.hidden = true;
				input.setAttribute('aria-expanded', 'false');
				input.removeAttribute('aria-activedescendant');
			}

			async function call(endpoint, body) {
				if (!/^og_[A-Za-z0-9_-]{32}$/.test(apiKey)) {
					throw new Error(
						'Replace og_YOUR_BROWSER_KEY with a browser key restricted to this origin.'
					);
				}
				if (Date.now() < retryAt) {
					throw new Error(
						`Wait ${Math.ceil((retryAt - Date.now()) / 1000)} seconds before trying again.`
					);
				}
				const response = await fetch(`https://api.opengeocoding.com/v1/${endpoint}`, {
					method: 'POST',
					headers: { 'x-api-key': apiKey, 'Content-Type': 'application/json' },
					body: JSON.stringify(body),
					signal: AbortSignal.any([controller.signal, AbortSignal.timeout(10000)]),
					credentials: 'omit'
				});
				if (response.status === 429) {
					const seconds = Math.max(1, Number(response.headers.get('Retry-After')) || 1);
					retryAt = Date.now() + seconds * 1000;
					throw new Error(
						`Request limit or credit balance reached. Retry in ${seconds} seconds; check your dashboard if it persists.`
					);
				}
				if (response.status === 404)
					throw new Error('This suggestion expired. Type again to get a fresh list.');
				if (response.status === 401)
					throw new Error('Check that your API key is active and copied correctly.');
				if (response.status === 403)
					throw new Error(`Add ${location.origin} to the browser key's allowed origins.`);
				if (!response.ok)
					throw new Error(`The request failed (HTTP ${response.status}). Try again later.`);
				return response.json();
			}

			function failure(error) {
				status.textContent =
					error.name === 'TypeError'
						? 'Could not reach the API. Check your connection and the browser key allowed origins.'
						: error.name === 'TimeoutError'
							? 'The request timed out. Type again to retry.'
							: error.message;
			}

			async function select(suggestion) {
				const mine = cancel();
				close();
				input.value = suggestion.displayName;
				retrieving = true;
				status.textContent = 'Retrieving the selected location…';
				output.textContent = '';
				try {
					const place = await call('retrieve', { id: suggestion.id });
					if (mine !== sequence) return;
					if (!place.geoCoordinates)
						throw new Error('No coordinates returned for this suggestion.');
					output.textContent = `${suggestion.displayName}\nLatitude: ${place.geoCoordinates.lat ?? 0}\nLongitude: ${place.geoCoordinates.lon ?? 0}`;
					status.textContent = 'Location selected.';
				} catch (error) {
					if (mine === sequence) failure(error);
				} finally {
					if (mine === sequence) retrieving = false;
				}
			}

			input.addEventListener('input', (event) => {
				const mine = cancel();
				close();
				output.textContent = '';
				const text = input.value.trim();
				if (event.isComposing || text.length < 2) {
					status.textContent = 'Type at least two characters.';
					return;
				}
				status.textContent = 'Waiting for typing to pause…';
				timer = setTimeout(async () => {
					status.textContent = 'Loading suggestions…';
					try {
						const body = await call('autocomplete', { text, limit: 5 });
						if (mine !== sequence) return;
						suggestions = body.suggestions ?? [];
						for (const [index, suggestion] of suggestions.entries()) {
							const item = document.createElement('li');
							item.setAttribute('role', 'none');
							const button = document.createElement('button');
							button.type = 'button';
							button.id = `suggestion-${index}`;
							button.tabIndex = -1;
							button.setAttribute('role', 'option');
							button.setAttribute('aria-selected', 'false');
							button.textContent = suggestion.displayName;
							button.addEventListener('pointerdown', (event) => event.preventDefault());
							button.addEventListener('click', () => select(suggestion));
							item.append(button);
							list.append(item);
						}
						list.hidden = suggestions.length === 0;
						input.setAttribute('aria-expanded', String(!list.hidden));
						status.textContent = suggestions.length
							? `${suggestions.length} suggestions. Use the arrow keys and Enter to select.`
							: 'No suggestions. Try a longer address, postcode or nearby city.';
					} catch (error) {
						if (mine === sequence) failure(error);
					}
				}, 500);
			});

			input.addEventListener('keydown', (event) => {
				if (event.isComposing) return;
				if (event.key === 'Escape') {
					cancel();
					close();
					status.textContent = 'Suggestions dismissed.';
				} else if (suggestions.length && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
					event.preventDefault();
					active =
						event.key === 'ArrowDown'
							? (active + 1) % suggestions.length
							: active <= 0
								? suggestions.length - 1
								: active - 1;
					for (const [index, option] of [...list.querySelectorAll('[role="option"]')].entries()) {
						option.setAttribute('aria-selected', String(index === active));
					}
					input.setAttribute('aria-activedescendant', `suggestion-${active}`);
				} else if (event.key === 'Enter' && active >= 0) {
					event.preventDefault();
					select(suggestions[active]);
				}
			});
			input.addEventListener('blur', () => {
				if (!retrieving) {
					cancel();
					status.textContent = 'Suggestions dismissed.';
				}
				close();
			});
		</script>
	</body>
</html>