Component Preview Pro v5.5.12+
Please note that the API for this component is currently in development and may be subject to changes.

Angular Autocomplete Component
Develop robust Angular Autocomplete components that enable dynamic search, dropdown suggestions, and seamless integration with external data sources. The pinnacle Angular Autocomplete solution for contemporary web applications.
Introduced in Pro v5.5.12+Overview
The CoreUI Angular Autocomplete Component is a powerful, feature-rich autocomplete solution that enhances form usability by providing intelligent suggestions based on user types. Whether you use static data, APIs, or complex search logic, this component delivers a smooth, accessible user experience with extensive customization options.
Key features of this Angular Autocomplete include:
- Dynamic dropdown suggestions with real time filtering
- External data integration with API support
- Advanced search capabilities
- Accessibility-first design
- Custom styles
Soon:
- Customizable templates
- Performance optimization with virtual scrolling
Basic Example
This straightforward demonstration provides a clear guide on how to implement a basic autocomplete input field, emphasizing the essential attributes and configurations required for its functionality.
You can also use objects with option property for more structured data:
For a minimal implementation without additional features:
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:
You can combine external search with global keyboard navigation:
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:
UX 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:
External Data
One of the most powerful features of the Angular 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:
Forms
Angular handles user input through reactive and template-driven forms. CoreUI Autocomplete supports both approaches.
Reactive
The Angular Autocomplete component can be used in reactive forms. You can bind the slider's value to a form control using the formControlName
directive.
Template-driven
The Angular Autocomplete component can be used in template-driven forms. You can bind the slider's value to a template variable using the ngModel
directive.
Form value: { "autocompleteControl": "" }
Value:
Accessibility
The Autocomplete component includes several accessibility features:
- ARIA attributes: Proper
role
,aria-expanded
,aria-haspopup
, andaria-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
Key | Action |
---|---|
Arrow Down | Navigate to the next option or open dropdown |
Arrow Up | Navigate to the previous option |
Enter | Select the highlighted option |
Escape | Close the dropdown and clear focus |
Tab | Accept hint completion (when hints are enabled) |
Backspace Delete | Clear input and trigger search |
Customizing
CSS variables
Angular CoreUI Autocomplete use local CSS variables for easy customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
SASS variables
API reference
Autocomplete Module
Autocomplete Standalone
cAutocomplete
directive
Inputs
name | description | type | default |
---|---|---|---|
allowOnlyDefinedOptions |
Only allow selection of predefined options. When true , users cannot enter custom values that are not in the options list. When false, users can enter and select custom values. |
boolean |
false |
cleaner |
Enables selection cleaner element. When true , displays a clear button that allows users to reset the selection. The cleaner button is only shown when there is a selection and the component is not disabled or read-only. |
boolean |
false |
clearSearchOnSelect |
Whether to clear the internal search state after selecting an option. When set to true , the internal search value used for filtering options is cleared after a selection is made. This affects only the component's internal logic. Note: This does not clear the visible input field if the component is using external search or is controlled via the searchValue prop. In such cases, clearing must be handled externally. |
boolean |
true |
disabled |
Toggle the disabled state for the component. When true, the Angular autocomplete is non-interactive and appears visually disabled. Users cannot type, select options, or trigger the dropdown. | boolean |
undefined |
highlightOptionsOnSearch |
Highlight options that match the search criteria. When true, matching portions of option labels are visually highlighted based on the current search input value. | boolean |
false |
indicator |
Show dropdown indicator/arrow button. When true , displays a dropdown arrow button that can be clicked to manually show or hide the options dropdown. |
boolean |
false |
loading |
When set, the options list will have a loading style: loading spinner and reduced opacity. Use this to indicate that options are being fetched asynchronously. The dropdown remains functional but shows visual loading indicators. | boolean |
false |
options |
List of option elements. Can contain Option objects, OptionsGroup objects, or plain strings. Plain strings are converted to simple Option objects internally. This is a required prop - the Angular Autocomplete needs options to function. | AutocompleteOption[] |
[] |
optionsMaxHeight |
Sets maxHeight of options list. Controls the maximum height of the dropdown options container. Can be a number (pixels) or a CSS length string (e.g., '200px', '10rem'). When content exceeds this height, a scrollbar will appear. | string | number |
auto |
placeholder |
Specifies a short hint that is visible in the search input. Displayed when the input is empty to guide user interaction. Standard HTML input placeholder behavior. | string |
undefined |
readOnly |
Toggle the readonly state for the component. When true, users can view and interact with the dropdown but cannot type in the search input or modify the selection through typing. Selection via clicking options may still be possible. | boolean |
false |
resetSelectionOnOptionsChange |
Determines whether the selected options should be cleared when the options list is updated. When true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided. | boolean |
false |
resetSelectionOnOptionsChange |
Determines whether the selected options should be cleared when the options list is updated. When true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided. | boolean |
false |
searchNoResultsLabel |
Sets the label for no results when filtering - false : Don't show any message when no results found, true : Show default No results found message, string : Show custom text message |
string | boolean |
undefined |
showHints |
Show hint options based on the current input value. When true, displays a preview/hint of the first matching option as semi-transparent text in the input field, similar to browser autocomplete. | boolean |
false |
sizing |
Size the component small, large, or default. | sm | lg |
undefined |
valid |
Set component validation state. | boolean | undefined |
undefined |
value |
Sets the initially selected value for the Angular Autocomplete component. Can be a string (matched against option labels) or number (matched against option values). The component will attempt to find and select the matching option on mount.. | string | number |
`` |
visible |
Toggle the visibility of autocomplete dropdown. Controls whether the dropdown is initially visible. The dropdown visibility can still be toggled through user interaction. | boolean |
false |
Outputs
name | description | type |
---|---|---|
visibleChange |
Called when the dropdown closes due to user interaction, clicks outside,escape key, or programmatic changes. | boolean |
valueChange |
Emits an event when a user changes the selected option. | string |
optionChange |
Emits an event when a user changes the selected option. | AutocompleteOption |
inputChange |
Emits an event when the filter/search value changes. Called whenever the user types in the search input. Useful for implementing external search functionality or analytics. | string |