How to make my search bar search through list items' texts?

Ionic Framework ionic-v3
1

Hello guys,

I created a search bar and ion-list with several ion-items manually without using a data provider.

Is there any way to make search bar search through any text inside ion-item by using typescript?
Due to not being able to pass in navigation function from data provider, I found out I have to build search result manually and build navigation function for each item to each page which has different contents.

So here’s my html:


                              <ion-header>
                                  <ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl" (ionInput)="onSearchInput()"
                                   placeholder="Search" style="background: black; color: white;">

                                  </ion-searchbar>
                                </ion-header>

 <ion-list style="background: black; color: white;"  *ngFor="let item of items">
                                     
                                    
                                     <ion-item style="background: black; color: white; margin-top: 50px;" (click)="navigateToPage01()">
                                       
                                      <div>
                                        <h4><strong>Item name 01</strong></h4>
                                        <p>Item description 01 | Information 01</p> 
                  
                                      </div>
                                         
                                      </ion-item>

 <ion-item (click)="navigateToPage02()">
                                       
                                      <div>
                                        <h4><strong>Item name 02</strong></h4>
                                        <p>Item description 02 | Information 02</p> 
                  
                                      </div>
                                         
                                      </ion-item>


 <ion-item (click)="navigateToPage03()">
                                       
                                      <div>
                                        <h4><strong>Dummy name 03</strong></h4>
                                        <p>Demo 03 | Information 03</p> 
                  
                                      </div>
                                         
                                      </ion-item>

 <ion-item (click)="navigateToPage04()">
                                       
                                      <div>
                                        <h4><strong>Demo title 04</strong></h4>
                                        <p>Item description 04 | Address 4</p> 
                  
                                      </div>
                                         
                                      </ion-item>

 <ion-item (click)="navigateToPage05()">
                                       
                                      <div>
                                        <h4><strong>Title 05</strong></h4>
                                        <p>Description 05 is here | Information 05</p> 
                  
                                      </div>
                                         
                                      </ion-item>


</ion-list>

How can I activate this search bar and make it search texts inside h4 tags and p tags?

Thanks

2

This is currently the last task to complete an app I’m working on… any help would be greatly appreciated.

Thanks,