根據使用者鍵盤對的輸入，向遠端伺服器傳送請求並返回資料，即：常見的搜尋功能

<input type="text" #searchSource placeholder="請輸入搜尋的內容"(keyup)='search(searchSource.value)'>

在搜尋時：input控制元件的(keyup) 事件繫結把每次擊鍵都發送給了元件的 search() 方法。

如果每次擊鍵都發送一次請求就太昂貴了。 最好是能等到使用者停止輸入時才傳送請求。此時就可以用到請求防抖（使用 RxJS 的操作符實現）。

1. 引入相關的包

import {Subject} from 'rxjs/Subject';
 

2.宣告變數

private searchTerms = new Subject<string>();

3.serach方法

search(serachParam: string) {
  this.searchTerms.next(serachParam);
}

4.請求防抖

ngOnInit(): void {
    this.searchTerms
      .pipe(
        // 請求防抖 300毫秒
        debounceTime(300),
        distinctUntilChanged())
      .subscribe(term => {
        // 此處進行httpClient的請求
        // term是使用者輸入的值
      });
  }
 

searchTerms 是一個序列，包含使用者輸入到搜尋框中的所有值。 它定義成了 RxJS 的 Subject 物件，這表示它是一個多播 Observable，同時還可以自行呼叫 next(value) 來產生值，除了把每個 searchText 的值都直接轉發給 httpClient

 之外

ngOnInit() 中的程式碼還通過下列兩個操作符對這些搜尋值進行管道處理：

1. debounceTime(300) - 等待，直到使用者停止輸入（這個例子中是停止 300ms）。

2. distinctUntilChanged() - 等待，直到搜尋內容發生了變化。

這樣，只有當用戶停止了輸入且搜尋值和以前不一樣的時候，搜尋值才會傳給服務，傳送請求。