Autocomplete

An Autocomplete component for implementing a search bar with live suggestions. This component leverages debounced state updates and simulated API calls to provide search suggestions based on user input. It includes keyboard navigation and click interaction for selecting items from the suggestion list, making it both accessible and highly interactive.

Features

• Debounced Input: Usesuse-debounceto delay API calls, minimizing unnecessary requests and improving performance.
• Simulated API Call: Provides a mocked API that filters predefined suggestions to emulate real-time search functionality.
• Keyboard Navigation: Supports ArrowUp, ArrowDown, and Enter keys to navigate and select suggestions.

Props

• value (optional): The initial value for the input field.
• onChange (optional): A callback function that receives the updated input value.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/autocomplete.json

Once the component is installed successfully, add the following JSON files to your project. /data/ folder is recommended for better organization.

• Countries JSON
• States JSON

Usage

import Autocomplete from '@/components/ui/autocomplete'

<Autocomplete
  value={field.value}
  onChange={field.onChange}
/>

Form