Skip to content

Perfect AutocompleteHigh-quality autocomplete web component

Accessible, customizable, and framework-agnostic

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

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