Search functionality in ionic 4

HTML FIle

 <ion-searchbar (ionInput)="getItems($event)" placeholder="Search by name"></ion-searchbar>

<ion-list lines="full">
  <ion-item button *ngFor="let item of lists">
    <ion-label>{{item.name}} <p>{{item.relation}}</p> </ion-label>
    <ion-icon name="information-circle-outline" slot="end"></ion-icon>
  </ion-item>
</ion-list>


TS.file

export class SearchPage implements OnInit {
  lists: any;
  searchQuery: '';
  constructor() {
    this.initializeItems();
   }
   initializeItems() {
    this.lists = [
       {name: 'vajid Ali', relation: 'Father'},
      {name: 'vajid Ali', relation: 'Uncel'},
      {name: 'vajid Ali', relation: 'Brother'},
      {name: 'vajid Ali', relation: 'Father'},
      {name: 'vajid Ali', relation: 'Uncel'},
      {name: 'vajid Ali', relation: 'Brother'},
      {name: 'vajid Ali', relation: 'Father'},
      {name: 'vajid Ali', relation: 'Uncel'},
      {name: 'vajid Ali', relation: 'Brother'},
      {name: 'vajid Ali', relation: 'Father'},
      {name: 'vajid Ali', relation: 'Uncel'},
      {name: 'vajid Ali', relation: 'Brother'},
    ];

   }

  getItems(ev: any) {
    this.initializeItems();
    const val = ev.target.value;
    if (val && val.trim() !== '') {
      this.lists = this.lists.filter((item) => {
        return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      });
    }
  }
}