リストからのみ入力を許可するmat-autocompleteの実装方法

リストを作成する: まず、入力を許可するリストを作成します。例えば、果物のリストがあるとします。

fruitList = ['りんご', 'バナナ', 'オレンジ', 'イチゴ'];

フォームを作成する: mat-autocompleteを含むフォームを作成します。以下は、Angularのテンプレート内での例です。

<mat-form-field>
  <input type="text" matInput [formControl]="fruitControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{ fruit }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

入力をフィルタリングする: 入力されたテキストを基に、入力を許可するリストをフィルタリングします。以下のコードは、Angularのコンポーネントでの例です。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
@Component({
  selector: 'app-fruit-autocomplete',
  templateUrl: './fruit-autocomplete.component.html',
  styleUrls: ['./fruit-autocomplete.component.css']
})
export class FruitAutocompleteComponent {
  fruitControl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruitList = ['りんご', 'バナナ', 'オレンジ', 'イチゴ'];
  constructor() {
    this.filteredFruits = this.fruitControl.valueChanges.pipe(
      startWith(''),
      map(value => this.filterFruits(value))
    );
  }
  filterFruits(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.fruitList.filter(fruit => fruit.toLowerCase().includes(filterValue));
  }
}

上記のコードでは、入力されたテキストに基づいてフルーツのリストをフィルタリングし、フィルタリングされた結果をmat-autocompleteの候補として表示しています。リストに存在しないテキストが入力された場合は、候補が表示されません。