Could you please provide me a link or example where auto-completer (MDB 9+) will work with retrieving the data from a restAPI? Trying to make this work, but have some issues. Would like to understand this better. My example code is underneath. Would appreciate the help.

Explain: The DogService returns a JSON array from a restAPI based on the filter provide and only starts after 3 characters.

TS:

> import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Observable, Subject } from 'rxjs'; import { map } from 'rxjs/operators'; import { HttpClient } from '@angular/common/http'; import { DogService } from '../../services/dog.service'; import { environment } from '../../../environments/environment';

@Component({ selector: 'form-dogs', templateUrl: './dogs.component.html', styleUrls: ['./dogs.component.scss'] }) export class DogsForm implements OnInit {

dog = null; // Dogs lookup searchText = new Subject(); url = environment.apiUrl + '/searchdogs'; results: Observable; data: any = [];

constructor(private router: Router, private apiService: DogService) { }

ngOnInit(): void { this.results = this.searchText .pipe( map((value: string) => this.filter(value)) ); }

filter(value: string): string[] | undefined { const filterValue = value.toLowerCase().trim().replace(' ', '%'); if (filterValue.length < 3) { return; } this.data = this.apiService.searchDogs(filterValue); console.log(this.data); return this.data; } }

HTML:

<div class="md-form">
    <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
    <input type="text" [ngModel]="searchText | async" (ngModelChange)="searchText.next($event)"
        class="completer-input form-control mdb-autocomplete mb-0" [mdbAutoCompleter]="auto" placeholder="Search" />
    <mdb-auto-completer #auto="mdbAutoCompleter"
        textNoResults="Start typing (at least 2 character) and max return is 50 dogs...">
        <mdb-option *ngFor="let option of results | async" [value]="option.name">
            <div class="d-flex justify-content-between align-items-center w-100">
                <span>{{ option.name }}</span>
                <img [src]="option.icon" alt="{{ option.name }} photo" class="completer-image" />
            </div>
        </mdb-option>
    </mdb-auto-completer>
</div>