Framework:
  • JavaScript / Vanilla JS
  • React.js
  • Vue.js
On this page

Component Preview

Please note that the API for this component is currently in development and may be subject to changes.

Introduced in Pro v5.5.20+ ## 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 - Customizable templates Soon: - _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:
## Custom templates The CoreUI Angular Autocomplete Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the `optionTemplate`, and for groups, you can use `optionGroupTemplate`, as demonstrated in the examples below:
## 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 with reactive forms. You can bind the 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 value to a template variable using the `ngModel` directive.
## 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
| 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` |
    | `optionGroupTemplate` | Custom template for rendering option groups. Allows customization of how option group headers appear in the dropdown.  | `TemplateRef` | `undefined` |
    | `optionTemplate` | Custom template for rendering individual options. Allows complete customization of how each option appears in the dropdown. | `TemplateRef` | `undefined` |
    | `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` |
    | `search` | Enables and configures search functionality. 
 `{ global: boolean, external: boolean }` | `'global' \| 'external' ` | `undefined` |
    | `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 on selected option change. | `string` |
    | `optionChange` | Emits an event on selected option change. | `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` |

  


  


  • GitHub
  • Twitter
  • Support
  • CoreUI (Vanilla)
  • CoreUI for React.js
  • CoreUI for Vue.js
 CoreUI for Angular is Open Source UI Components Library for Angular. 
 Currently v5.6.13 Code licensed  MIT , docs  CC BY 3.0  . 
   CoreUI PRO requires a   commercial license.