Autocomplete

Angular Bootstrap 5 Autocomplete component

Autocomplete component predicts the words being typed based on the first few letters given by the user. You can search the list using basic scroll and the keyboard arrows

Note: Read the API tab to find all available options and advanced customization


Basic example


Display value

The displayValue option allow to separate original result value from the value that will be displayed in the result list or input (after selection). Its useful when the data returned by the filter method is an array of objects. You can specify which parameter of the object should be displayed.



Threshold

Use threshold option to specify a minimum number of the characters in the input field needed to perform a search operation.


Custom item template

It is possible to customize the apparance of the autocomplete option. You can use the listHeight option to modify the result list height when you want to display more content in the component dropdown.


Custom content

A custom content container with a class .autocomplete-custom-content will be displayed at the end of the autocomplete-custom-item-subtitle dropdown. You can use it to display a number of search results.


Reactive forms


Validation

Looks good!
Input value is required

Autocomplete - API


Import


        import { MdbAutocompleteModule } from 'mdb-angular-ui-kit/autocomplete';
        …
        @NgModule ({
          ...
          imports: [MdbAutocompleteModule],
          ...
        })
      

Inputs

Name Type Default Description
displayValue Function (value) => value Function executed for complex search results, to get value to display in the results list ue
optionHeight number 38 Changes the single option height value
listHeight number 190 Height of the results list

Outputs

Name Type Description
closed EventEmitter<any> Event fired when the select is closed
opened EventEmitter<any> Event fired when the select is opened
selected EventEmitter<any> Event fired when the autocomplete item is selected

            <mdb-form-control style="width: 22rem">
              <input
                mdbInput
                [ngModel]="searchText | async"
                (ngModelChange)="searchText.next($event)"
                [mdbAutocomplete]="autocomplete"
                type="text"
                id="autocomplete"
                class="form-control"
              />
              <label mdbLabel class="form-label" for="autocomplete">Example label</label>
            </mdb-form-control>

            <mdb-autocomplete #autocomplete="mdbAutocomplete" (opened)="onOpen()">
              <mdb-option *ngFor="let option of results" [value]="option">
                {{ option }}
              </mdb-option>
              <div *ngIf="notFound" class="autocomplete-no-results">No results found</div>
            </mdb-autocomplete>
          

            import { Component, OnInit } from '@angular/core';
            import { Observable, Subject } from 'rxjs';
            import {
              map,
              startWith,
              tap,
            } from 'rxjs/operators';

            @Component({
              selector: 'app-autocomplete',
              templateUrl: './autocomplete.component.html',
              styleUrls: ['./autocomplete.component.scss'],
            })
            export class AutocompleteComponent implements OnInit {
              searchText = new Subject();
              results: Observable<string[]>;
              notFound = false;

              data = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];

              constructor() {}

              ngOnInit(): void {
                this.results = this.searchText.pipe(
                  startWith(''),
                  map((value: string) => this.filter(value)),
                  tap((results: string[]) =>
                    results.length > 0 ? (this.notFound = false) : (this.notFound = true)
                  )
                );
              }

              filter(value: string): string[] {
                const filterValue = value.toLowerCase();
                return this.data.filter((item: string) => item.toLowerCase().includes(filterValue));
              }

              onOpen(): void {
                console.log('opened');
              }
            }