Angular Material - 自定义自动完成组件

# 使用Angular Material创建自定义自动完成组件

bash
# 安装Angular Material
ng add @angular/material

bash
ng generate component custom-autocomplete

html
  
  
    
      {{ option }}
    
  

typescript
// custom-autocomplete.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { startWith, map } from 'rxjs/operators';
@Component({
  selector: 'app-custom-autocomplete',
  templateUrl: './custom-autocomplete.component.html',
  styleUrls: ['./custom-autocomplete.component.css']
})
export class CustomAutocompleteComponent {
  options: string[] = ['Option 1', 'Option 2', 'Option 3'];
  formControl = new FormControl();
  filteredOptions: string[] = [];
  constructor() {
    this.filteredOptions = this.formControl.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));
  }
}

css
/* custom-autocomplete.component.css */
.mat-form-field {
  width: 300px;
}
.mat-option {
  cursor: pointer;
}
.mat-option:hover {
  background-color: #e0e0e0;
}