How to Implement a <ion-searchbar>in Ionic app to filter Firebase data?

How do I Implement a Search Bar in the Ionic app to filter Firebase data? I want to implement a to filter data as user types in. I am not able to get it done. I have seen several tutorials but still unable to achieve them. Any help will be appreciated.

this is my list.page.html

  <ion-searchbar></ion-searchbar>
  <div class="ion-padding" style="padding-bottom: 0">
    <ion-list class="bg-transparent" lines="none" *ngFor="let user of UsersArray" color="none" >
   <ion-item color="none"> <ion-card>
      <ion-card-content>
        <h2>{{user.name}}</h2>
        <p>{{user.email}}</p>
        <p>₹ {{user.mobile}}</p>
      </ion-card-content>
    </ion-card>
  </ion-item>
  </ion-list>
  </div>
</ion-content>

this is my list.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { User } from '../shared/User';
import { UserService } from '../shared/user2.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.page.html',
  styleUrls: ['./list.page.scss'],
})
export class ListPage implements OnInit {

  UsersArray = [];

  constructor(
    private apiService: UserService
  ) { }

  ngOnInit() {
    this.fetchBookings();
    let bookingRes = this.apiService.getUserList();
    bookingRes.snapshotChanges().subscribe(res => {
      this.UsersArray = [];
      res.forEach(item => {
        let a = item.payload.toJSON();
        a['$key'] = item.key;
        this.UsersArray.push(a as User);
      })
    })
  }

  fetchBookings() {
    this.apiService.getUserList().valueChanges().subscribe(res => {
      console.log('Fetched users list!')
    })
  }

}

1 answer

  • answered 2020-09-14 20:30 Wesley

    Here's a basic example. I would have two arrays – the original array usersArray which gets left unfiltered, and a modifiable array usersArrayFiltered which gets filters applied to it. You will bind to the filtered array in your HTML.

    Right after you populate your usersArray with data in your ngOnOnit hook, assign usersArrayFiltered as a copy of the original array.

    // just populated usersArray
    this.usersArrayFiltered = [...this.usersArray];
    

    Now create a search method that takes in the search query as a parameter. If the query is an empty string, then re-assign usersArrayFiltered as a copy of the original usersArray. If it's not an empty string, then turn usersArrayFiltered into a filtered array of usersArray by only including objects that have values which contain the query string.

    search(query) {
        if (!query) { // revert back to the original array if no query
          this.usersArrayFiltered = [...this.usersArray];
        } else { // filter array by query
          this.usersArrayFiltered = this.usersArray.filter((user) => {
            return (user.name.includes(query) || user.email.includes(query) || user.phone.includes(query));
          })
        }
      }
    

    Listen to value changes on your <ion-searchbar> and pass the value of it to your search function.

    <ion-searchbar (ionChange)="search($event.target.value)"></ion-searchbar>
    

    Bind your *ngFor loop to the filtered array.

    <ion-list *ngFor="let user of usersArrayFiltered">
    ...
    </ion-list>