0

I am using mat-autocomplete but instead of prepopulating the dropdown I would like to wait until the user types soemthing then call a backend service to pupulate it. here is the example I was trying to work off of. My thought process was to add a (keyup) to the input then call my function as I type:

<mat-form-field class="example-full-width">
    <mat-label>Number</mat-label>
    <input (keyup)="mycustomfilter($event.key)"**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>
Flash
  • 924
  • 3
  • 22
  • 44
  • Does this answer your question? [How to implement Angular Material 2 Autocomplete with AJAX](https://stackoverflow.com/questions/47088363/how-to-implement-angular-material-2-autocomplete-with-ajax) – Brian Burton Mar 24 '21 at 17:43
  • @BrianBurton that example still prepopulates the dropdown after the service is initially called – Flash Mar 24 '21 at 17:46
  • Not sure what you mean by "prepopulate" in that case. In the Angular example you linked to, that's what I consider prepopulating the options. In the linked example the options are pulled from a remote source and updated dynamically as you type with correct usage of debounce to prevent hammering the server. Isn't that what you're asking? – Brian Burton Mar 24 '21 at 22:05
  • well basically on keyup after the user types something then I would call the service to populate the dropdown results – Flash Mar 25 '21 at 14:59
  • 1
    That's exactly what that linked answer does. In Angular instead of keyup you monitor the field's control or model for changes. – Brian Burton Mar 25 '21 at 15:18

0 Answers0