app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { FormControl } from '@angular/forms';
import { SomeService } from './some-service';
import { autocomplete } from './autocomplete.operator';

@Component({
   selector: 'app-component',
   templateUrl: './app-component.html',
   styleUrls: ['./app-component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject();
  public formControl = new FormControl('');

  constructor(
     private readonly someService: SomeService
  ){}

  ngOnInit(){
    this.formControl.valueChanges.pipe(
      autocomplete(5000, (controlValue) => this.someService.search(controlValue)), //search with debounce
      takeUntil(this.destroy$)  //cleanup
    ).subscribe(val => console.log('Results: ', val)) //This should only happen with a debounce of 300ms
  }

  ngOnDestroy(){
    this.destroy$.next();
  }
}

autocomplete.operator.ts

import { debounceTime, switchMap, takeUntil, skip } from 'rxjs/operators';
import { Observable } from 'rxjs';

export const autocomplete = (
  time: number, //debounce
  selector: (...args: any[]) => Observable<any>
) => (source$: Observable<any>) =>
  source$.pipe(
    distinctUntilChanged(), / only emit distinct objects, based on last emitted value so you're not triggering two queries
    debounceTime(time),
    switchMap((...args: any[]) =>
      selector(...args).pipe(takeUntil(source$.pipe(skip(1))))
    )
  );