Perfect AutocompleteHigh-quality autocomplete web component

Accessible, customizable, and framework-agnostic

Get Started

View on GitHub

Try it now

Try typing "alice", "dev", or "design"

⌨️

Fully Accessible

Complete WAI-ARIA combobox pattern with keyboard navigation and screen reader support.

🎨

Customizable

CSS custom properties for theming, custom templates with htm, and flexible rendering API.

📱

Mobile-First

Touch gestures, virtual keyboard handling, and responsive design out of the box.

⚡

Lightweight

~42KB bundle size with Vue 3, Floating UI, and htm included.

🔌

Framework Agnostic

Works everywhere as a standard HTML Custom Element.

🧪

Well Tested

Comprehensive unit and browser tests ensure reliability.

Quick Start

html

<!-- Include the script -->
<script type="module">
  import { register } from '@mikolaj.jeziorny/perfect-autocomplete'
  register()
</script>

<!-- Use the component -->
<input type="search" id="search" />
<perfect-autocomplete
  for="search"
  url="/api/search"
  min-chars="2"
></perfect-autocomplete>

Features

Debounced Input - Configurable debounce delay prevents excessive API calls
Smart Positioning - Automatic flip and shift when near viewport edges
Keyboard Navigation - Full arrow key, Enter, Escape, and Tab support
Touch Gestures - Swipe to dismiss on mobile devices
Custom Templates - Use htm for type-safe, JSX-like templating
Accessible - Complete ARIA implementation with live regions
Dark Mode - Automatic dark mode support via CSS custom properties
5 Built-in Themes - Classic, Basic, Modern, Bootstrap, and Tailwind

Author

Created by Mikolaj Jeziorny