i have this page with a dropdown i want to add a searchbar to filter through the dropdown list and then select the value

here is how i got the value to the dropdown :

 setValue(values) {
for (const value of values) {
  if (value.name.length > 0) {
    for (const valuename of value.name) {
      const index = this.validatorvalue.map((e) => {
        return e.id;
      }).indexOf(valuename .id);
      if (index === -1) {
        this.validatorvalue.push(valuename);
      }
    }
  }
}

i added an onkey event :

 onkey(event :any) {this.filter(event.target.value);}

filter(value: string){
let filters = value.toLowerCase();
  this.validatorvalue.map(e => e.value.includes(filters));
}

and in the html :

<input (keyup)="onkey($event)" type="text" matInput >
            
     <mat-option *ngFor="let value of validatorvalue" [value]="value.id">
              {{ value.first_name + ' ' + value.last_name }}
            </mat-option>

i don’t know what next should i do for it to be working
thanks in advance for any help