Try It Now - Start Typing

How It Works

Step 1: Start typing an address, postcode, or street name (e.g., "10 Downing Street", "SW1A 2AA", or "Mossland Road")

Step 2: Select a Group to see all addresses at that postcode, or select a Premise to view full address details

Step 3: Click any result to see complete address information including geocoding data

0
Searches Performed
0
Results Displayed
0ms
Avg Response Time
0
Credits Used ●
Intelligent Credit Algorithm

Only 1 credit per search session • Session = searches within 60 seconds with same first 3 characters • Group selections and viewing details = FREE • Geocoding (lat/long) included FREE • UPRN only when requested with uprn=true (+1 credit)

Selected Address Details

Behind The Scenes - API Integration

This demo uses the ePostcode REST API Search endpoint with real-time requests. Every keystroke triggers a new API call, demonstrating the speed and responsiveness of our service.

Search Endpoint

// Search with opensearch=true (flexible matching) fetch('https://wsp.epostcode.com/uk/v1/search?key=API_KEY&phrase=...') .then(response => response.json()) .then(data => { // Display results in dropdown data.items.forEach(item => { if (item.type === 'Group') { // Show postcode group (multiple addresses) } else if (item.type === 'Premise') { // Show individual address } }); });

GetPremise Endpoint

// Get full address details when user selects fetch(`https://wsp.epostcode.com/uk/v1/getpremise?key=API_KEY&id=${id}`) .then(response => response.json()) .then(premise => { // Display full address with: // - Building name/number // - Street, locality, town // - Postcode, county // - Latitude & longitude (FREE) // - UPRN (with uprn=true, +1 credit) });

Key Features

• Real-time Search: Results appear as you type with sub-100ms response times

• Smart Grouping: Groups multiple addresses by postcode for efficient navigation

• Full Details: Get complete address data including free geocoding (lat/long)

• Flexible Matching: Search by postcode, street name, building number, or town

• PAF Certified: Access to 30+ million Royal Mail approved UK addresses

View Full API Documentation Get Your API Key

Implementation Guide

Quick Start

  1. Get your API key from ePostcode.com
  2. Download the standalone demo package below
  3. Open lookahead-search-standalone.html in a text editor
  4. Replace YOUR_API_KEY_HERE with your actual API key (around line 726)
  5. Open the file in your browser - it works completely standalone!

Key Features

⚡ Real-Time Search 300ms debounced API calls for optimal performance
🎯 Smart Grouping Groups addresses by postcode, drill down to individual addresses
📊 Complete Data Full address details with organized field grouping
💰 Credit Tracking Smart credit algorithm - 1 credit per search session
🗺️ Free Geocoding Latitude/Longitude included at no extra cost
📱 Responsive Works perfectly on desktop, tablet, and mobile

API Endpoints Used

1. Search API - Real-time address search
GET https://wsp.epostcode.com/uk/v1/search
Parameters: key, phrase, opensearch=true
2. GetPremise API - Full address details
GET https://wsp.epostcode.com/uk/v1/getpremise
Parameters: key, id

Code Structure

  • Self-contained HTML - No external dependencies except Font Awesome CDN
  • Inline CSS - All styles embedded for portability
  • Vanilla JavaScript - No jQuery or frameworks required
  • Modern ES6+ - Async/await, arrow functions, template literals
  • XSS Protected - All user input properly escaped

Customization Tips

  • Debounce delay: Adjust 300 on line ~767 (higher = fewer API calls, slower feel)
  • Colors: Search for #667eea to change the purple brand color
  • Remove footer: Delete the entire <footer> section if not needed
  • Field display: Modify fieldGroups object to customize which fields appear in which category
  • Remove stats: Delete the stats-grid section if you don't want to show search metrics

Browser Support


Chrome 60+

Firefox 55+

Safari 11+

Edge 79+

Download Standalone Demo Package

Everything you need to integrate lookahead search into your application

Download lookahead-search-standalone.zip

Package includes: Standalone HTML file + README with setup instructions


API Documentation
View Full Docs →

Support
Contact Us →

FAQ
Get Answers →