Display a new list on top of an other at SearchBar event


#1

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


#2

If you want to move position of your categories list when searching then you can just add ion item with ngFor between your ion-card and ion-searchbar as i’ve shown below.
And If you want your search results like select list then, you can use this:

<ion-content>
  <ion-searchbar class="searchBar" (ionInput)="filterItems($event)" placeholder="{{ 'SEARCH_PLACEHOLDER' | translate }}"></ion-searchbar>

//<div *ngIf="someFlag">    
//you can use this above div with any flag variable to show or remove this search item list from the view.
<ion-item *ngFor="let searchItem of searchItems">
{{searchItem}}  //or whatever you want to display
</ion-item>
//</div>

  <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>

Please correct me if I’ve misunderstood your question.


#3

Thanks for your answer ! i’m going to try it but I think that it’s exactly what I need