Dear @Code4Humans

My code works exactly the same as yours. When I type a character, there's 400ms debounce, distinctUntilChanged() and after it, the result of a search is logged into the console.

There's shouldn't be the difference between data acquired from API or from the static source.

But if you still encounter problems with mdb-autocomplete component, maybe you should try our new mdb-auto-completer component which is different from the old one?

Please take a look at our new completer.

Best Regards,

Damian

Hello, yeah but in your case you have a static list (searchData), when i enter a new letter in the input text i call a service with data paginated. so i'm using valuechanges to listen the changes in the input text and bring new data

Dear @Code4Humans

Could you please specify exactly, what works for the first time, and not works for the second time?

Please take a look at my code - for me, I'm able to see in the console every selected item (if it is not equal like previous one - due to distinctUntilChanged):

.html:

<form [formGroup]="form">
        <mdb-autocomplete formControlName="comp" [label]="'Select color'" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService"
                          [minSearchLength]="0">
        </mdb-autocomplete>
      </form>

ts:

form: FormGroup = new FormGroup({
   comp: new FormControl()
 });

  protected searchStr: string;
  protected dataService: CompleterData;
  protected searchData = [
    { color: 'red' },
    { color: 'green' },
    { color: 'blue' },
    { color: 'cyan' },
    { color: 'magenta' },
    { color: 'yellow' },
    { color: 'black' },
  ];

  constructor(private completerService: CompleterService) {
    this.dataService = completerService.local(this.searchData, 'color', 'color');

    this.form.controls['comp'].valueChanges.pipe(
      debounceTime(400),
      distinctUntilChanged(),
    ).subscribe((data: any) => {
      console.log(data);
    })
  }

Best Regards,

Damian