On this page

Component Preview ^{Pro v5.5.16+}

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

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Get CoreUI PRO

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.16+

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.

Framework

Start typing to search option or provide value

<label cLabel for="ac-01">Framework</label>
<input
  [options]="options"
  [searchNoResultsLabel]="'No results found'"
  cAutocomplete
  cleaner
  highlightOptionsOnSearch
  indicator
  placeholder="Search technologies..."
  search="global"
  showHints
  type="text"
  value="Bootstrap"
  id="ac-01"
/>
<div class="form-text">Start typing to search option or provide value</div>

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AutocompleteDirective, AutocompleteOption, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete01',
  imports: [AutocompleteDirective, ReactiveFormsModule, FormLabelDirective],
  templateUrl: './autocomplete01.component.html'
})
export class Autocomplete01Component {
  readonly options: AutocompleteOption[] = ['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js'];
}

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

Framework

Start typing to search option or provide value

<label cLabel for="ac-02">Framework</label>
<input
  [options]="options"
  [searchNoResultsLabel]="'No results found'"
  cAutocomplete
  cleaner
  highlightOptionsOnSearch
  indicator
  placeholder="Search technologies..."
  search="global"
  showHints
  type="text"
  [value]="1"
  id="ac-02"
/>
<div class="form-text">Start typing to search option or provide value</div>

import { Component } from '@angular/core';
import { AutocompleteDirective, AutocompleteOption, FormLabelDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete02',
  imports: [AutocompleteDirective, FormLabelDirective],
  templateUrl: './autocomplete02.component.html',
})
export class Autocomplete02Component {
  readonly options: AutocompleteOption[] = [
    {
      label: 'Angular',
      value: 1
    },
    {
      label: 'Bootstrap',
      value: 2
    },
    {
      label: 'Next.js',
      value: 3
    },
    {
      label: 'React.js',
      value: 4
    },
    {
      label: 'Vue.js',
      value: 5
    }
  ];
}

For a minimal implementation without additional features:

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete03',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete03.component.html',
})
export class Autocomplete03Component {}

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:

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete04',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete04.component.html',
})
export class Autocomplete04Component {}

Global search

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

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  search="global"
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete05',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete05.component.html'
})
export class Autocomplete05Component {}

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:

<input cAutocomplete
       [options]="filteredOptions"
       (inputChange)="handleSearch($event)"
       search="external"
>

You can combine external search with global keyboard navigation:

<input cAutocomplete
       [options]="filteredOptions"
       (inputChange)="handleSearch($event)"
       [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:

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  allowOnlyDefinedOptions
  cAutocomplete
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete08',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete08.component.html'
})
export class Autocomplete08Component {}

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:

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  showHints
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete09',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete09.component.html'
})
export class Autocomplete09Component {}

Highlight matching text

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

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  highlightOptionsOnSearch
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete10',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete10.component.html'
})
export class Autocomplete10Component {}

Validation states

Apply validation styling to indicate input validity.

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  [valid]="true"
  cAutocomplete
  placeholder="Valid autocomplete"
/>
<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  [valid]="false"
  cAutocomplete
  placeholder="Invalid autocomplete"
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete11',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete11.component.html',
  styleUrl: './autocomplete11.component.scss'
})
export class Autocomplete11Component {}

::ng-deep .autocomplete + .autocomplete {
  padding-top: .5rem;
}

Disabled state

Disable the component to prevent user interaction:

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  disabled
  indicator
  placeholder="Disabled autocomplete..."
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete12',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete12.component.html'
})
export class Autocomplete12Component {}

Sizing

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

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  placeholder="Large autocomplete..."
  sizing="lg"
/>
<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  placeholder="Default autocomplete..."
/>
<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  placeholder="Small autocomplete..."
  sizing="sm"
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete13',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete13.component.html',
  styleUrl: './autocomplete13.component.scss'
})
export class Autocomplete13Component {}

::ng-deep .autocomplete + .autocomplete {
  padding-top: .5rem;
}

Cleaner functionality

Enable a cleaner button to quickly clear input element:

<input
  [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
  cAutocomplete
  cleaner
  placeholder="With cleaner button..."
/>

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete14',
  imports: [AutocompleteDirective],
  templateUrl: './autocomplete14.component.html',
})
export class Autocomplete14Component {}

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:

Form value: { "userName": "Barbara" }

<label cLabel for="ac-16">Users <c-badge size="sm" color="success">{{loading() ? 'loading' : ''}}</c-badge></label>
<input
  [loading]="loading()"
  [options]="users()"
  [search]="{external: true, global: true}"
  cAutocomplete
  cleaner
  highlightOptionsOnSearch
  indicator
  placeholder="Search users..."
  showHints
  (inputChange)="searchName.set($event)"
  [delay]="500"
  id="ac-16"
/>
<div class="form-text">Please select your user.</div>
@if (error()) {
  @let message = error().error?.message || 'Unknown error';
  @let status = error().status;
  <div class="text-danger">An error {{status}} occurred: {{message}}</div>
}

import { HttpErrorResponse } from '@angular/common/http';
import { Component, computed, inject, signal } from '@angular/core';
import { AutocompleteDirective, AutocompleteOption, BadgeComponent, FormLabelDirective } from '@coreui/angular';
import { UsersService } from './users.service';

@Component({
  selector: 'docs-autocomplete16',
  imports: [AutocompleteDirective, FormLabelDirective, BadgeComponent],
  templateUrl: './autocomplete16.component.html'
})
export class Autocomplete16Component {
  readonly #usersService = inject(UsersService);
  readonly searchName = signal('');
  readonly usersResource = this.#usersService.getUsers(this.searchName);

  readonly users = computed(() => {
    const rawUsers = this.usersResource?.value()?.records?.map((user) => user.first_name as AutocompleteOption) ?? [];
    return [...new Set(rawUsers)];
  });
  readonly error = computed(() => this.usersResource?.error() as HttpErrorResponse);
  readonly loading = computed(() => this.usersResource?.isLoading());

  // readonly #usersEffect = effect(() => {
  //   console.log('Users:', this.users());
  //   console.log('Loading:', this.loading());
  //   console.log('Error:', this.error());
  // });
}

import { Injectable, Signal } from '@angular/core';
import { HttpParams, httpResource } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UsersService {
  private usersUrl = 'https://apitest.coreui.io/demos/users';

  getUsers(userName: Signal<string>) {
    const apiParams: IApiParams = {
      limit: 1000,
      offset: 0,
      sort: 'first_name'
    };

    const httpParams: HttpParams = new HttpParams({ fromObject: { ...apiParams } });

    return httpResource<IUsersResponse>(() => ({
      url: `${this.usersUrl}?first_name=${userName() || undefined}`,
      params: httpParams
    }));
  }
}

export interface IUsersResponse {
  number_of_records: number;
  number_of_matching_records: number;
  records: IUser[];
}

export interface IUser {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  country: string;
  ip_address: string;
  registered: string;
}
export interface IApiParams {
  offset?: number;
  limit?: number;
  columnFilter?: string;
  columnSorter?: string;
  sort?: string;
}

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.

Form value: { "framework": "Angular" }

<span> Form value: {{ formGroup.value | json }}</span>
<hr>
<form [formGroup]="formGroup">
  <input
    [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
    cAutocomplete
    cleaner
    formControlName="framework"
    showHints
  />
</form>

import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete17',
  imports: [AutocompleteDirective, ReactiveFormsModule, JsonPipe],
  templateUrl: './autocomplete17.component.html'
})
export class Autocomplete17Component {
  formGroup = new FormGroup({
    framework: new FormControl('Angular')
  });
}

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:

<p> Form value: {{ form.value | json }}</p>
<p> Value: {{ value() }}</p>
<hr>
<form #form="ngForm">
  <input
    [(ngModel)]="value"
    [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']"
    cAutocomplete
    cleaner
    name="autocompleteControl"
  />
</form>

import { JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  selector: 'docs-autocomplete18',
  imports: [AutocompleteDirective, ReactiveFormsModule, JsonPipe, FormsModule],
  templateUrl: './autocomplete18.component.html'
})
export class Autocomplete18Component {
  readonly value = signal('');
}

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.

.autocomplete {
  --cui-autocomplete-zindex: #{$autocomplete-zindex};
  --cui-autocomplete-font-family: #{$autocomplete-font-family};
  --cui-autocomplete-font-size: #{$autocomplete-font-size};
  --cui-autocomplete-font-weight: #{$autocomplete-font-weight};
  --cui-autocomplete-line-height: #{$autocomplete-line-height};
  --cui-autocomplete-color: #{$autocomplete-color};
  --cui-autocomplete-bg: #{$autocomplete-bg};
  --cui-autocomplete-box-shadow: #{$autocomplete-box-shadow};
  --cui-autocomplete-border-width: #{$autocomplete-border-width};
  --cui-autocomplete-border-color: #{$autocomplete-border-color};
  --cui-autocomplete-border-radius: #{$autocomplete-border-radius};
  --cui-autocomplete-disabled-color: #{$autocomplete-disabled-color};
  --cui-autocomplete-disabled-bg: #{$autocomplete-disabled-bg};
  --cui-autocomplete-disabled-border-color: #{$autocomplete-disabled-border-color};
  --cui-autocomplete-focus-color: #{$autocomplete-focus-color};
  --cui-autocomplete-focus-bg: #{$autocomplete-focus-bg};
  --cui-autocomplete-focus-border-color: #{$autocomplete-focus-border-color};
  --cui-autocomplete-focus-box-shadow: #{$autocomplete-focus-box-shadow};
  --cui-autocomplete-placeholder-color: #{$autocomplete-placeholder-color};
  --cui-autocomplete-padding-y: #{$autocomplete-padding-y};
  --cui-autocomplete-padding-x: #{$autocomplete-padding-x};
  --cui-autocomplete-cleaner-width: #{$autocomplete-cleaner-width};
  --cui-autocomplete-cleaner-height: #{$autocomplete-cleaner-height};
  --cui-autocomplete-cleaner-padding-y: #{$autocomplete-cleaner-padding-y};
  --cui-autocomplete-cleaner-padding-x: #{$autocomplete-cleaner-padding-x};
  --cui-autocomplete-cleaner-icon: #{escape-svg($autocomplete-cleaner-icon)};
  --cui-autocomplete-cleaner-icon-color: #{$autocomplete-cleaner-icon-color};
  --cui-autocomplete-cleaner-icon-hover-color: #{$autocomplete-cleaner-icon-hover-color};
  --cui-autocomplete-cleaner-icon-size: #{$autocomplete-cleaner-icon-size};
  --cui-autocomplete-indicator-width: #{$autocomplete-indicator-width};
  --cui-autocomplete-indicator-height: #{$autocomplete-indicator-height};
  --cui-autocomplete-indicator-padding-y: #{$autocomplete-indicator-padding-y};
  --cui-autocomplete-indicator-padding-x: #{$autocomplete-indicator-padding-x};
  --cui-autocomplete-indicator-icon: #{escape-svg($autocomplete-indicator-icon)};
  --cui-autocomplete-indicator-icon-color: #{$autocomplete-indicator-icon-color};
  --cui-autocomplete-indicator-icon-hover-color: #{$autocomplete-indicator-icon-hover-color};
  --cui-autocomplete-indicator-icon-size: #{$autocomplete-indicator-icon-size};
  --cui-autocomplete-dropdown-min-width: #{$autocomplete-dropdown-min-width};
  --cui-autocomplete-dropdown-bg: #{$autocomplete-dropdown-bg};
  --cui-autocomplete-dropdown-border-width: #{$autocomplete-dropdown-border-width};
  --cui-autocomplete-dropdown-border-color: #{$autocomplete-dropdown-border-color};
  --cui-autocomplete-dropdown-border-radius: #{$autocomplete-dropdown-border-radius};
  --cui-autocomplete-dropdown-box-shadow: #{$autocomplete-dropdown-box-shadow};
  --cui-autocomplete-options-padding-y: #{$autocomplete-options-padding-y};
  --cui-autocomplete-options-padding-x: #{$autocomplete-options-padding-x};
  --cui-autocomplete-options-font-size: #{$autocomplete-options-font-size};
  --cui-autocomplete-options-font-weight: #{$autocomplete-options-font-weight};
  --cui-autocomplete-options-color: #{$autocomplete-options-color};
  --cui-autocomplete-optgroup-label-padding-y: #{$autocomplete-optgroup-label-padding-y};
  --cui-autocomplete-optgroup-label-padding-x: #{$autocomplete-optgroup-label-padding-x};
  --cui-autocomplete-optgroup-label-font-size: #{$autocomplete-optgroup-label-font-size};
  --cui-autocomplete-optgroup-label-font-weight: #{$autocomplete-optgroup-label-font-weight};
  --cui-autocomplete-optgroup-label-color: #{$autocomplete-optgroup-label-color};
  --cui-autocomplete-optgroup-label-text-transform: #{$autocomplete-optgroup-label-text-transform};
  --cui-autocomplete-option-padding-y: #{$autocomplete-option-padding-y};
  --cui-autocomplete-option-padding-x: #{$autocomplete-option-padding-x};
  --cui-autocomplete-option-margin-y: #{$autocomplete-option-margin-y};
  --cui-autocomplete-option-margin-x: #{$autocomplete-option-margin-x};
  --cui-autocomplete-option-border-width: #{$autocomplete-option-border-width};
  --cui-autocomplete-option-border-color: #{$autocomplete-option-border-color};
  --cui-autocomplete-option-border-radius: #{$autocomplete-option-border-radius};
  --cui-autocomplete-option-box-shadow: #{$autocomplete-option-box-shadow};
  --cui-autocomplete-option-hover-color: #{$autocomplete-option-hover-color};
  --cui-autocomplete-option-hover-bg: #{$autocomplete-option-hover-bg};
  --cui-autocomplete-option-focus-box-shadow: #{$autocomplete-option-focus-box-shadow};
  --cui-autocomplete-option-disabled-color: #{$autocomplete-option-disabled-color};
  --cui-autocomplete-option-indicator-width: #{$autocomplete-option-indicator-width};
  --cui-autocomplete-option-indicator-bg: #{$autocomplete-option-indicator-bg};
  --cui-autocomplete-option-indicator-border: #{$autocomplete-option-indicator-border};
  --cui-autocomplete-option-indicator-border-radius: #{$autocomplete-option-indicator-border-radius};
  --cui-autocomplete-option-selected-bg: #{$autocomplete-option-selected-bg};
  --cui-autocomplete-option-selected-indicator-bg: #{$autocomplete-option-selected-indicator-bg};
  --cui-autocomplete-option-selected-indicator-bg-image: #{escape-svg($autocomplete-option-selected-indicator-bg-image)};
  --cui-autocomplete-option-selected-indicator-border-color: #{$autocomplete-option-selected-indicator-border-color};
}

SASS variables

$autocomplete-zindex:                    1000 !default;
$autocomplete-font-family:               $input-font-family !default;
$autocomplete-font-size:                 $input-font-size !default;
$autocomplete-font-weight:               $input-font-weight !default;
$autocomplete-line-height:               $input-line-height !default;
$autocomplete-padding-y:                 $input-padding-y !default;
$autocomplete-padding-x:                 $input-padding-x !default;
$autocomplete-color:                     $input-color !default;
$autocomplete-bg:                        $input-bg !default;
$autocomplete-box-shadow:                $box-shadow-inset !default;

$autocomplete-border-width:              $input-border-width !default;
$autocomplete-border-color:              $input-border-color !default;
$autocomplete-border-radius:             $input-border-radius !default;
$autocomplete-border-radius-sm:          $input-border-radius-sm !default;
$autocomplete-border-radius-lg:          $input-border-radius-lg !default;

$autocomplete-disabled-color:            $input-disabled-color !default;
$autocomplete-disabled-bg:               $input-disabled-bg !default;
$autocomplete-disabled-border-color:     $input-disabled-border-color !default;

$autocomplete-focus-color:               $input-focus-color !default;
$autocomplete-focus-bg:                  $input-focus-bg !default;
$autocomplete-focus-border-color:        $input-focus-border-color !default;
$autocomplete-focus-box-shadow:          $input-btn-focus-box-shadow !default;

$autocomplete-placeholder-color:         var(--cui-secondary-color) !default;

$autocomplete-invalid-border-color:      $form-invalid-border-color !default;
$autocomplete-valid-border-color:        $form-valid-border-color !default;

$autocomplete-cleaner-width:             1.5rem !default;
$autocomplete-cleaner-height:            1.5rem !default;
$autocomplete-cleaner-padding-x:         0 !default;
$autocomplete-cleaner-padding-y:         0 !default;
$autocomplete-cleaner-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
$autocomplete-cleaner-icon-color:        var(--cui-tertiary-color) !default;
$autocomplete-cleaner-icon-hover-color:  var(--cui-body-color) !default;
$autocomplete-cleaner-icon-size:         .625rem !default;

$autocomplete-indicator-width:             1.5rem !default;
$autocomplete-indicator-height:            1.5rem !default;
$autocomplete-indicator-padding-x:         0 !default;
$autocomplete-indicator-padding-y:         0 !default;
$autocomplete-indicator-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
$autocomplete-indicator-icon-color:        var(--cui-tertiary-color) !default;
$autocomplete-indicator-icon-hover-color:  var(--cui-body-color) !default;
$autocomplete-indicator-icon-size:         .75rem !default;

$autocomplete-dropdown-min-width:        100% !default;
$autocomplete-dropdown-bg:               var(--cui-body-bg) !default;
$autocomplete-dropdown-border-color:     var(--cui-border-color) !default;
$autocomplete-dropdown-border-width:     var(--cui-border-width) !default;
$autocomplete-dropdown-border-radius:    var(--cui-border-radius) !default;
$autocomplete-dropdown-box-shadow:       var(--cui-box-shadow) !default;

$autocomplete-options-padding-y:         .5rem !default;
$autocomplete-options-padding-x:         .5rem !default;
$autocomplete-options-font-size:         $font-size-base !default;
$autocomplete-options-font-weight:       $font-weight-normal !default;
$autocomplete-options-color:             var(--cui-body-color) !default;

$autocomplete-optgroup-label-padding-y:       .5rem !default;
$autocomplete-optgroup-label-padding-x:       .625rem !default;
$autocomplete-optgroup-label-font-size:       80% !default;
$autocomplete-optgroup-label-font-weight:     $font-weight-bold !default;
$autocomplete-optgroup-label-color:           var(--cui-tertiary-color) !default;
$autocomplete-optgroup-label-text-transform:  uppercase !default;

$autocomplete-option-padding-y:               .5rem !default;
$autocomplete-option-padding-x:               .75rem !default;
$autocomplete-option-margin-y:                1px !default;
$autocomplete-option-margin-x:                0 !default;
$autocomplete-option-border-width:            $input-border-width !default;
$autocomplete-option-border-color:            transparent !default;
$autocomplete-option-border-radius:           var(--cui-border-radius) !default;
$autocomplete-option-box-shadow:              $box-shadow-inset !default;

$autocomplete-option-hover-color:             var(--cui-body-color) !default;
$autocomplete-option-hover-bg:                var(--cui-tertiary-bg) !default;

$autocomplete-option-focus-box-shadow:        $input-btn-focus-box-shadow !default;

$autocomplete-option-indicator-width:          1em !default;
$autocomplete-option-indicator-bg:             $form-check-input-bg !default;
$autocomplete-option-indicator-border:         $form-check-input-border !default;
$autocomplete-option-indicator-border-radius:  .25em !default;

$autocomplete-option-selected-bg:                      var(--cui-secondary-bg) !default;
$autocomplete-option-selected-indicator-bg:            $form-check-input-checked-bg-color !default;
$autocomplete-option-selected-indicator-bg-image:      $form-check-input-checked-bg-image !default;
$autocomplete-option-selected-indicator-border-color:  $autocomplete-option-selected-indicator-bg !default;

$autocomplete-option-disabled-color:        var(--cui-secondary-color) !default;

$autocomplete-font-size-lg:                 $input-font-size-lg !default;
$autocomplete-padding-y-lg:                 $input-padding-y-lg !default;
$autocomplete-padding-x-lg:                 $input-padding-x-lg !default;

$autocomplete-font-size-sm:                 $input-font-size-sm !default;
$autocomplete-padding-y-sm:                 $input-padding-y-sm !default;
$autocomplete-padding-x-sm:                 $input-padding-x-sm !default;

API reference

Autocomplete Module

import { NgModule } from '@angular/core';
import { AutocompleteModule } from '@coreui/angular';

@NgModule({
  imports: [AutocompleteModule]
})
export class CustomAppModule {}

Autocomplete Standalone

import { Component } from '@angular/core';
import { AutocompleteDirective } from '@coreui/angular';

@Component({
  template: ` <input [options]="['Angular', 'Bootstrap', 'Next.js', 'React.js', 'Vue.js']" cAutocomplete /> `,
  imports: [AutocompleteDirective, AutocompleteDirective],
  standalone: true
})
export class CustomAppComponent {}

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`

Component Preview Pro v5.5.16+