我们先解决第一个问题：当用户输入的时候，不要每次输入一个字符就触发一次搜索，而是设置一个时间延时，当用户停止输入的时间超过400毫秒，就触发搜索。如果用户一直不停的输入，输入的时间间隔小于400ms就不触发。这正是'Observables'能做的事情。
为此，我们需要一个Observable<string>对象来保存用户的输入，然后就可以用这个对象提供的方法来实现延时触发的功能。我们可以利用Angular2的指令(directive)formControl。要用这个指令，需要引入ReactiveFormsModule模块。
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { JsonpModule } from '@angular/http'; import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [BrowserModule, JsonpModule, ReactiveFormsModule] declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {}
引入以后，我们就可以在模板里面使用FormControl来创建表单输入，并给他设置一个变量名term。
<input type="text" [formControl]="term"/>
这样，这个input组件所绑定的变量term就是FormControl的一个实例，它有一个属性valueChanges，这个属性是一个Observable<string>类型的对象。我们就可以使用Observable<string>的debounceTime方法来设置触发延时。
export class AppComponent { items: Array<string>; term = new FormControl(); constructor(private wikipediaService: WikipediaService) { this.term.valueChanges .debounceTime(400) .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items)); } }
我们看到this.term.valueChanges是一个Observable<string>对象，通过debounceTime(400)我们设置它的事件触发延时是400毫秒。这个方法还是返回一个Observable<string>对象。然后我们就给这个对象添加一个订阅事件:
term => this.wikipediaService.search(term).then(items => this.items = items)
这是用lambda表达式写的一个方法。参数term就是Observable<string>对象经过400ms的延时设置，产生的一个用户输入的字符串。方法体就是用这个参数进行搜索，跟之前版本的处理方式一致。
在这个修改版中，我们把之前的search()方法去掉，直接在构造函数constructor(...)里面添加的，这相当于，用户在输入框的输入，是一个消息源，会经过debounceTime(400)的处理，然后产生一个消息，这个消息会发送给订阅的事件处理函数来处理，也就是搜索。所以，我们不需要一个search()方法来控制什么时候触发，而是通过类型订阅的机制来处理用户输入。
防止触发两次
现在我们再来解决第二个问题，就是经过400ms的延时以后，用户输入的搜索条件一样的情况。有了上面的Observable，这个就很简单了，Observable有一个distinctUntilChanged的方法，他会判断从消息源过来的新数据跟上次的数据是否一致，只有不一致才会触发订阅的方法。
this.term.valueChanges .debounceTime(400) .distinctUntilChanged() .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
处理返回顺序
上面描述了服务器端异步返回数据的时候，返回顺序不一致出现的问题。对于这个问题，我们的解决办法就比较直接，也就是对于之前的请求返回的结果，直接忽略，只处理在页面上用户最后一次发起的请求的结果。说道忽略之前的请求，如果你们看了上面的视频，或者知道Promise和Observable的区别的话，就应该想到我们可以利用Observable的dispose()方法来解决。实际上，我们是利用这种'disposable'特性来解决，而不是直接调用dispose()方法。（实在不知道该怎么翻译'disposable'，它的意思是我可以中止在Observable对象上的消息处理，字面的意思是可被丢弃的、一次性的。）
上面我们讲到，在service的search()方法里，我们把Jsonp返回的结果从Observable<Response> 转换成 Promise<Response>对象。为了利用Observable的特性去丢弃上一个未及时返回的结果，我们让这个方法还是返回Observable类型的结果。下面就是修改后的WikipediaService里面的search()方法。
search (term: string) { var search = new URLSearchParams() search.set('action', 'opensearch'); search.set('search', term); search.set('format', 'json'); return this.jsonp .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search }) .map((response) => response.json()[1]); }
注意这个方法最后用.map((response) => response.json()[1])，意思是对于原先的Response类型的结果，转换成实际的搜索结果的列表。