AutoCompleteInput

🔎 AutoCompleteInput Component

Overview

AutoCompleteInput is a reusable, generic autocomplete input component built on Carbon's ComboBox. It fetches suggestions asynchronously as the user types, supports debounced input to minimize API calls, and allows for flexible item extraction and display. This component is ideal for search fields, dynamic dropdowns, and any scenario where you want to provide real-time suggestions based on user input.

Props

Name	Type	Required	Description
debounceTime	number	No	Delay in ms before triggering the API call (default: 300)
onAutoCompleteChange	(value: string) => Promise<unknown>	Yes	Function to fetch autocomplete suggestions based on input
extractItems	(raw: unknown) => T[]	No	Function to extract items from the raw API response
onSelect	`(data: T	null	undefined) => void`
...ComboBoxProps	All other props from Carbon's ComboBox, except items, onChange, onInputChange	No	Standard ComboBox props (e.g., id, placeholder, etc.)

🧪 Usage Example

import AutoCompleteInput from '@/components/Form/AutoCompleteInput';

const fetchSuggestions = async (query: string) => {
  // Replace with your API call
  return await API.searchUsers(query);
};

const extractUserItems = (raw: any) => raw.results;

<AutoCompleteInput
  id="user-search"
  placeholder="Search users..."
  onAutoCompleteChange={fetchSuggestions}
  extractItems={extractUserItems}
  onSelect={user => console.log('Selected:', user)}
/>

🔍 Implementation Details

• Debounced Input: Uses the useDebounce hook to delay API calls until the user stops typing.
• Async Suggestions: Fetches suggestions with React Query, only when input length ≥ 2.
• Custom Item Extraction: Supports transforming raw API responses into displayable items.
• Loading & Empty States: Shows a loading indicator or a "No results" message as appropriate.
• Flexible Rendering: Allows custom string conversion and rendering for items.

📦 Return Type

Renders a Carbon ComboBox with autocomplete and async loading features. For more details, see the source code in index.tsx.