Topic: Autocomplete using observable from service

tommykjensen free asked 4 years ago

I would like to add a autocomplete component to my app. I tried the basic example from

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')
      map(data => data.result ),
      tap(data => console.log('Users: ', JSON.stringify(data))),

In my component I fetch it with this

 users$ = this.userService.users$
    catchError(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:

        class="completer-input form-control mdb-autocomplete"

        placeholder="Choose user"

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

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

Arkadiusz Idzikowski staff commented 4 years ago

Can you share full ts code so we can check how you configured the autocomplete?

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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: pc
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes