自动完成搜索下拉角度答案

【问题标题】：Autocomplete search drop down angular自动完成搜索下拉角度
【发布时间】：2021-02-05 00:28:54
【问题描述】：

我有一个下拉列表，可以在其中获取一些 json 数据。我通过获取所有 API 获取数据。所以我没有硬编码任何数据。我是在角度做这个

<td>
  <mat-form-field>
    <mat-label>Customer</mat-label>
    <mat-select formControlName="custom">
      <mat-option *ngFor="let customer of customerList" [value]="customer.id">
        {{customer.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</td>

所以这里我有一个名为 customerList 的列表，里面的数据是 json 格式。所以我必须在下拉列表中显示名称字段并将 id 传递给后端。所以我的任务是在这个下拉列表中进行自动完成搜索

【问题讨论】：

你可以在这里添加你的示例customerList、ts文件和html文件吗？
[{"id":1,"name": "kumar"},{"id":2, "name" "mukesh"}]。我无法添加 ts 文件，因为它太大而无法理解

标签： angular typescript autocomplete angular-material angular-forms

【解决方案1】：

您可以使用 Angular Material 中的AutoComplete。

 <mat-form-field class="example-full-width">
    <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

在您的组件中，您可以编写自己的过滤器逻辑，如下所示

filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }

【讨论】：

我之前尝试过完全相同的事情。我没有收到错误，同时也没有搜索下拉菜单。 tscode应该放在什么特定的地方吗？因为我在 ts 中有大量代码
@JoeRishwanth 再试一次
没有帮助。没有显示下拉菜单。
@JoeRishwanth 除非您发布有关您尝试过的内容的 stackblitz 链接，否则没有人可以帮助您

【解决方案2】：

@Joe Rishwanth 您需要为下拉列表添加mat-autocomplete

您的客户列表的 HTML 文件：

<form class="example-form">
<mat-form-field>
    <input type="text"
       placeholder="Enter Customer name"
       aria-label="Number"
       matInput
       [formControl]="custom"
       [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
        <mat-option *ngFor="let customer of customerFilter | async" [value]="customer">
            {{customer.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Ts 文件：

export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
  custom = new FormControl();
  customerList = [{ id: 1, name: "kumar" }, { id: 2, name: "mukesh" }];
  customerFilter: Observable<any>;

  ngOnInit() {
    this.customerFilter = this.custom.valueChanges.pipe(
      startWith(""),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): any {
    const filterValue = value;
    return this.customerList.filter(customer => {
      return customer.name.toLowerCase().indexOf(filterValue) === 0;
    });
  }
}

stackblitz 参考：https://stackblitz.com/edit/angular-ih4c5r?file=src%2Fapp%2Fautocomplete-auto-active-first-option-example.ts

【讨论】：