输入提示（type-ahead）建议-原创手记-慕课网

可观察对象可以简化输入提示建议的实现方式。典型的输入提示要完成一系列独立的任务：

从输入中监听数据。
移除输入值前后的空白字符，并确认它达到了最小长度。
防抖（这样才能防止连续按键时每次按键都发起 API 请求，而应该等到按键出现停顿时才发起）
如果输入值没有变化，则不要发起请求（比如按某个字符，然后快速按退格）。
如果已发出的 AJAX 请求的结果会因为后续的修改而变得无效，那就取消它。

完全用 JavaScript 的传统写法实现这个功能可能需要大量的工作。使用可观察对象，你可以使用这样一个 RxJS 操作符的简单序列：

import { Component, AfterViewInit } from '@angular/core';import { fromEvent } from 'rxjs';import { ajax } from 'rxjs/ajax'import { debounce, map, filter, debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators'@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})export class AppComponent implements AfterViewInit{
  title = 'My frist Angular App!';
  searchBox;
  typehead;  constructor(){
  
  }

  ngAfterViewInit(){    this.searchBox = document.getElementById('food');    this.typehead = fromEvent(this.searchBox, 'input').pipe(
      map((e: KeyboardEvent) => e.target.value),
      filter(text => text.length > 2),
      debounceTime(250),
      distinctUntilChanged(),      // switchMap(() => ajax('/api/endpoint'))
    );    this.typehead.subscribe(data => {      console.log(data);
    });  
  }
}

几点注意事项，

视图创建后，才能通过document获取元素，因此放在AfterViewInit函数中执行，而不能放在构造函数中
KeyboardEvent.target.value能取得确定的值

作者：readilen
链接：https://www.jianshu.com/p/8f551e5adb03