Hi everyone,
I have my homePage with a searchBar and a list where I display categories. I would my searchBar to search not on categories but on events and display a list on top of the first one with the result of what the user search.
Here is my code
public loadCategories(){
this.categoryService.getCategory()
.then(categoryFetched => {
this.categories = categoryFetched;
console.log(this.categories);
})
}
public loadEvents(){
this.eventService.getAllEvents()
.then(eventFetched => {
this.events = eventFetched;
console.log(this.events);
this.initializeItems();
})
}
initializeItems() {
this.searchItems = this.events;
}
filterItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.searchItems = this.searchItems.filter((events) => {
return (events.description.toLowerCase().indexOf(val.toLowerCase()) > -1)
})
}
}
And HTML
<ion-content>
<ion-searchbar class="searchBar" (ionInput)="filterItems($event)" placeholder="{{ 'SEARCH_PLACEHOLDER' | translate }}"></ion-searchbar>
<ion-card class="ion-card-discover" ion-item *ngFor="let category of categories" (tap)="openCategory(category.id)">
<img class="ion-img-discover" [src]="category.image"/>
<div class="ion-title-discover">{{category.name}}</div>
</ion-card>
</ion-content>
Thanks