I would like to add a autocomplete component to my app. I tried the basic example from https://mdbootstrap.com/docs/angular/forms/autocomplete/

this works just fine as it is. However I would like to replace the data with input from a service.

My service has this oberservable defined

users$ = this.http.get<ReturnedUsers>('url')
    .pipe(
      map(data => data.result ),
      tap(data => console.log('Users: ', JSON.stringify(data))),
      catchError(this.handleError)
    );

In my component I fetch it with this

 users$ = this.userService.users$
  .pipe(
    catchError(err => {
      this.msgService.sendMessage(err)      
      return EMPTY;
    }))

In my template I can display the result with a *ngFor so the observable do return results.

The model for User is

export interface User {
  name: string;
  user_name: string;
  first_name: string;
  last_name: string;
  email: string;
}

export interface ReturnedUsers {
  result: User[];
}

My question is what do I need to change in the basic example to get it to work with my observable instead of the "data" property*

EDIT: I figured out how to populate the dropdownlist but can't figure out the search part.

I now got this in my html:

<input
        type="text"
        class="completer-input form-control mdb-autocomplete"
        [ngModel]="user"

        [mdbAutoCompleter]="auto"
        placeholder="Choose user"
      />

      <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(" >
        <mdb-option *ngFor="let user of users " [value]="user.email.display_value">
          {{user.name.display_value}} - {{user.user_name.display_value}} - {{user.email.display_value}}
        </mdb-option>
      </mdb-auto-completer>

This populates the dropdown box. But without the search part.