Question

我在Angular 4项目中使用Angular Material 2 Autocomplete。如何实现自动完成值从HTTP调用加载example？

任何人都可以给我一个Plunker演示吗？谢谢

Answer 1

首先，你应该展示一些解决问题的尝试，但幸运的是我很无聊并会提供答案;）

此示例中我使用了：https://jsonplaceholder.typicode.com/users

我们将JSON结果存储为users中的可观察对象。然后我们有可观察的filteredUsers，它将在模板中显示。由于这是一个http请求，我们希望使用您选择的distinctUntilChanged和debounceTime来限制http请求。我们用于捕获值用户输入的表单控件在此示例中为searchCtrl。在收听valueChanges时，我们会使用switchMap来平展结果。

基于以上评论，您的代码如下所示：

更新（rxjs 6）

this.filteredUsers = this.searchCtrl.valueChanges.pipe(
  startWith(null),
  debounceTime(200),
  distinctUntilChanged(),
  switchMap(val => {
    return this.filter(val || '')
  })
 )
}

filter(val: string) {
  return this.users.pipe(
    map(response => response.filter(option => {
      return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
    }))
  )
}

对于模板，我们使用async管道：

<mat-form-field>
  <input matInput [matAutocomplete]="auto" [formControl]="searchCtrl">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let user of filteredUsers | async" 
      [value]="user.name">
      <span>{{ user.name }}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

<强> DEMO

<强> OLD：

this.filteredUsers = this.searchCtrl.valueChanges
  .startWith(null)
  .debounceTime(200)
  .distinctUntilChanged()
  .switchMap(val => {
    return this.filter(val || '')
})      

filter(val: string) {
  return this.users
    .map(response => response.filter(option => { 
      return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
    }));
}

<强> DEMO

如何使用AJAX实现Angular Material 2自动完成功能

1 个答案: