Autocomplete

mat-autocomplete with simple options and reactive filtering.

Basic Autocomplete

Simple autocomplete with static options.

Code
<mat-form-field appearance="outline" class="w-full max-w-xs">
  <mat-label>Fruit</mat-label>
  <input matInput [(ngModel)]="fruit" [matAutocomplete]="fruitAuto" />
  <mat-autocomplete #fruitAuto="matAutocomplete">
    <mat-option value="Apple">Apple</mat-option>
    <mat-option value="Banana">Banana</mat-option>
    <mat-option value="Orange">Orange</mat-option>
  </mat-autocomplete>
</mat-form-field>

Filtered Autocomplete

Autocomplete that filters options based on user input using FormControl.

Code
<mat-form-field appearance="outline" class="rui-w-full rui-max-w-xs">
  <mat-label>State</mat-label>
  <input matInput [formControl]="stateCtrl" [matAutocomplete]="stateAuto" />
  <mat-autocomplete #stateAuto="matAutocomplete">
    @for (state of filteredStates(); track state) {
      <mat-option [value]="state">{{ state }}</mat-option>
    }
  </mat-autocomplete>
</mat-form-field>