Address Search Demo

This page demonstrates the address search functionality using Headless UI's Combobox component. Start typing an address to see suggestions.

Headless UI Address Search

This version uses Headless UI's Combobox component for the address search functionality.

Start typing to search for addresses. Results will appear after you enter at least 3 characters.

About This Component

This address search component is built using:

  • Vue.js for reactivity and component structure
  • Headless UI Combobox for the autocomplete functionality
  • Tailwind CSS for styling
  • Astro's client:visible directive for hydration

Features:

  • Debounced API requests (300ms delay)
  • Minimum 3 characters required before searching
  • Loading spinner while waiting for results
  • Pagination with "Load more..." button
  • Maximum results limit (100)
  • Clear guidance with "Search and select your address" message
  • Keyboard navigation support
  • Accessible design with ARIA attributes