CODEWITHSUNDEEP
ionic-frameworkionic4ionic-native
Nirav Jain
Nirav Jain

Reputation: 47

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 (ionChange)="search($event.target.value)"></ion-searchbar>
    <ion-list class="bg-transparent "  lines="none" *ngFor="let user of usersArrayFiltered" 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

export class HomePage implements OnInit {
  UsersArray = [];
  usersArrayFiltered =[];
  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);
        this.usersArrayFiltered = [...this.UsersArray];
      })
    })
  }
  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));
      })
    }
  }
  fetchBookings() {
    this.apiService.getUserList().valueChanges().subscribe(res => {
      console.log('Fetched users list!')
    })
  }


}

Upvotes: 0

Views: 2663

Answers (1)

Wesley
Wesley

Reputation: 844

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>

Upvotes: 2

Related Questions