Can't make debounceTime() or throttleTime() to work on an Angular http request

For the life of me, I can not make this work.I've searched and searched, but I couldn't find any example (all examples out there are with .fromEvent(), none on a http.get).

In my template, I have this input:

<input type="text" (input)="categoriesSearch($event)">

In my component, I have the following:

categoriesSearch(event) {    this.categoriesSubscription = this.apiService        .getCategoriesList(this.uploadForm.get('categories').value)        .debounceTime(3000)        // .throttleTime(3000)        .subscribe(            (response) => {                this.categories = response.data;            }        );}

And this is the method in my ApiService:

getCategoriesList(keyword = null) {    const headers = new Headers();    headers.append('Content-Type', 'application/json');    headers.append('Bearer', this.authService.user.token);    const getParams: URLSearchParams = new URLSearchParams();    getParams.set('keyword', keyword);    return this.http.get(this.apiHost +'/categories', { headers: headers, search: getParams })        .map(response => response.json());}

In the categoriesSearch() method, I've tried both debounceTime() and throttleTime() (I also imported them, of course import 'rxjs/add/operator/debounceTime', import 'rxjs/add/operator/throttleTime').

But the http.get request is not debounced or throttled at all! If I type 10 characters in 3 seconds, it makes 10 http requests.

How on earth do I tell this.http.get to only make a request if at least 3 seconds have passed since the previous request or since 'no request' (meaning an initial 3 seconds delay)? Ok, maybe here I should say "since I've last typed something in my input".

I've also tried using debounceTime()/throttleTime() in the service directly, before the .map() operator - but the result is the same.