Is there a more efficient way for me to phrase this? I've integrated a search bar in Ionic and it appears to be functioning correctly. However, when I click the cancel icon on the search bar, the lists/contents do not revert back.
This is my.html
<ion-header>
<ion-navbar >
<ion-title>Worship and Fellowship</ion-title>
</ion-navbar>
<ion-searchbar
(ionInput)="getItems($event)">
</ion-searchbar>
</ion-header>
<ion-content padding>
<ion-list inset>
<ion-item *ngFor="let lesson of lessons; index as i;" slice:0:10>
<h4 (click)="loadLesson(lesson)" tapable>{{ lesson.title | uppercase }}</h4>
</ion-item>
</ion-list>
</ion-content>
This is my .ts
@IonicPage()
@Component({
selector: 'page-section1',
templateUrl: 'section1.html',
})
export class Section1Page {
ID:number;
lessons:Lessons[];
constructor(public navCtrl: NavController, public navParams: NavParams, private cdata: ChorusdataProvider) {
this.cdata.getData().subscribe(lists => {
console.log("lessons are here", lists['section1']);
this.lessons = lists['section1'];
});
}
initializeItems() {
this.lessons = this.lessons;
}
getItems(ev) {
// Reset items back to all original items
this.initializeItems();
// Set val to the value of the event target
var val = ev.target.value;
// If the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.lessons = this.lessons.filter((lesson) => {
return (lesson.title.toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}
I can't figure out what I'm doing wrong. When someone uses the search bar and taps the cancel icon, the content list should refresh to its original state like a normal search bar. What am I missing?