Topic: Angular MDB auto-completer with REST API

JeroenVunderink premium asked 4 years ago

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.


> 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.apiService.searchDogs(filterValue); console.log(; return; } }


<div class="md-form">
    <mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>
    <input type="text" [ngModel]="searchText | async" (ngModelChange)="$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]="">
            <div class="d-flex justify-content-between align-items-center w-100">
                <span>{{ }}</span>
                <img [src]="option.icon" alt="{{ }} photo" class="completer-image" />

Arkadiusz Idzikowski staff answered 4 years ago

You can find the examples that use remote data here:

and here:

JeroenVunderink premium commented 4 years ago

Thanks for the links. Will try.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.1.0
  • Device: MacBook
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No