React Autocomplete Component

Overview#

The React Autocomplete Component is a powerful, feature-rich autocomplete solution that enhances form usability by providing intelligent suggestions as user types. Whether you're building a React autocomplete with static array data, fetching data from APIs, or implementing complex search logic, this autocomplete component delivers a smooth, accessible user experience with extensive customization options.

Key features of this React Autocomplete include:

• Dynamic dropdown suggestions with real time filtering
• External data integration with API support
• Customizable templates and custom styles
• Advanced search capabilities
• Performance optimization with virtual scrolling
• Accessibility-first design

Basic example#

A straightforward demonstration of how to implement a basic autocomplete input field, highlighting essential attributes and configurations.

You can also use objects with option property for more structured data:

For a minimal implementation without additional features:

<CAutocomplete
  label="Framework"
  options={['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']}
  placeholder="Search technologies..."
  text="Start typing to search option or provide value"
/>

Search functionality#

Configure the search behavior to match your application's needs. The search prop determines how the component handles user input and filtering.

Default search#

By default, search operates only when the input field is focused and filters options internally:

Global search#

Enable global search functionality that allows users to start typing from anywhere within the component to begin searching:

External search#

When external search is enabled (search="external"), the component delegates search operations to your custom logic or external API. This is perfect for server-side filtering, complex search algorithms, or third-party search services:

<CAutocomplete 
  options={filteredOptions} 
  onInput={handleSearch} 
  search="external" 
/>

You can combine external search with global keyboard navigation:

<CAutocomplete 
  options={filteredOptions} 
  onInput={handleSearch} 
  search={{ external: true, global: true }} 
/>

See the External Data section for a complete working example.

Restricted selection#

Limit users to only select from the provided options by enabling allowOnlyDefinedOptions. This prevents custom value entry:

User experience enhancements#

Enable intelligent hints and auto-completion features to improve user experience.

Show hints#

Display intelligent completion hints that preview the first matching option as user types:

Highlight matching text#

Enhance search visibility by highlighting matching portions of option labels when user hovers over suggestions:

Validation states#

Apply validation styling to indicate input validity.

Disabled state#

Disable the component to prevent user interaction:

Sizing#

Choose from different sizes to match your design system and form layout:

Cleaner functionality#

Enable a cleaner button to quickly clear input element:

Custom templates#

The CoreUI React Autocomplete Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the optionsTemplate, and for groups, you can use optionsGroupsTemplate, as demonstrated in the examples below:

External Data#

One of the most powerful features of the React Autocomplete component is its ability to work with external data sources, such as REST APIs, GraphQL endpoints, or server-side search services. This is essential when dealing with large datasets that shouldn't be loaded entirely into the client.

Implementation example#

Here's how to implement external data loading with proper debouncing to optimize API calls:

Key features for external data#

• useDebouncedCallback: Prevents excessive API calls during rapid typing
• search="external": Disables internal filtering to rely on server-side search
• loading prop: Shows loading indicators during API requests
• virtualScroller: Efficiently renders large result sets
• searchNoResultsLabel: Provides user feedback when no results are found

Required imports#

import { useDebouncedCallback } from '@coreui/react-pro'

The useDebouncedCallback hook is a utility available in @coreui/react-pro that delays function execution until after a specified timeout has elapsed since the last invocation. This prevents excessive API calls during rapid input changes and improves overall performance.

Performance optimization#

For large datasets, the React Autocomplete component includes several performance optimizations:

• Virtual scrolling: Use virtualScroller={true} to render only visible options
• Debounced search: Implement search debouncing to reduce API calls
• External filtering: Delegate filtering to the server with search="external"
• Lazy loading: Load data only when needed

Accessibility#

The Autocomplete component includes several accessibility features:

• ARIA attributes: Proper role, aria-expanded, aria-haspopup, and aria-autocomplete attributes
• Screen reader support: Descriptive labels and announcements for state changes
• Keyboard navigation: Full keyboard support with arrow keys, Enter, Escape, and Tab
• Focus management: Proper focus handling and visual focus indicators
• Semantic markup: Uses appropriate HTML elements and structure

Keyboard shortcuts#

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

• <CAutocomplete />