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

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. 使用此处描述的 Angular 方式 https://angular.io/guide/http#1-wait-for-the-user-to-stop-typing

2. 使用 'javascript' 方式...参见这个 plunker 示例：

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

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