在用户完成时调用函数输入文本

Question

我打算使用ng2-autocomplete实现一个自动完成的下拉列表。但是我的数据源在远程，并且我在Angular 2服务应用程序中使用服务器查询数据源。

组件视图

<ng2-completer 
      [(ngModel)]="searchStr" 
      [datasource]="dataService" 
      [minSearchLength]="0"  
      (change)='findAddress($event)'>
</ng2-completer>

组件

findAddress($event){
      this.addressCrawlerService.findMap($event.target.value)
          .subscribe(
              res => {
                  let resultArray = res["result"];
                  this.searchData = resultArray;
                  this.dataService = this.completerService.local(this.searchData, 'streetAddress', 'streetAddress');
              },
              error => {
                  console.log(error.json);
              }
          ); 
}

在这里，当值发生变化时，值不会被激发。修复此错误的代码中存在哪些错误。

Answer 1

我认为您需要延迟服务呼叫，直到用户停止键入。

为此，您有两个选择：

1. 使用这里描述的角度方式https://angular.io/guide/http#1-wait-for-the-user-to-stop-typing
2. Use 'javascript‘方式...请参阅此柱塞示例：

https://embed.plnkr.co/9VYmoGxKO3buc4DmVQgl/

这两种方式的原则是相同的。对于输入的每个字符，两者都设置一个计时器等待，即400ms。如果用户在400ms内键入下一个字符，则已设置的计时器停止，并启动新的计时器。如果400毫秒没有输入，代码就会被执行。