Question

我的目标是要有一个搜索框和Angular Material列表。当用户在搜索框中键入一个值时，应基于搜索（包含功能）搜索列表项。

现在，我做了一个自动完成下拉列表，但是我需要一个与https://material.angular.io/components/autocomplete/overview的自动完成功能完全相同的Angular Material列表来代替下拉列表我需要在“角度材质”列表中使用相同的功能。

HTML：

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

TS.file：

import {
 Component,
 OnInit
} from '@angular/core';
import {
 FormControl
} from '@angular/forms';
import {
 Observable
} from 'rxjs';
import {
 map,
 startWith
} from 'rxjs/operators';

/**
 * @title Highlight the first autocomplete option
 */
@Component({
 selector: 'autocomplete-auto-active-first-option-example',
 templateUrl: 'autocomplete-auto-active-first-option-example.html',
 styleUrls: ['autocomplete-auto-active-first-option-example.css'],
})
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
 myControl = new FormControl();
 options: string[] = ['admin', 'manager', 'customer'];
 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().indexOf(filterValue) === 0);
 }
}

CSS：

.example - form {
  min - width: 150 px;
  max - width: 500 px;
  width: 100 % ;
}

.example - full - width {
  width: 100 % ;
}

在Angular Material中实现Angular列表自动完成功能，例如自动完成下拉菜单

0 个答案: